请问大家为什么我左边的盒子总是比右边要矮一截啊

Question

<div class="more-bd">
                <div class="info">
                    <div class="left">优秀作文</div>
                    <div class="right">123</div>
                </div>
                <div class="in">
                    <div class="left">12</div>
                    <div class="right">12</div>
                </div>
                <div class="into">
                    <div class="left">1</div>
                    <div class="right">1</div>
                </div>
                <div class="inter">
                    <div class="left">23</div>
                    <div class="right">23</div>
                </div>
            </div>

.more-bd{
    float: left;
    display: flex;
    height: 400px;
    width: 1600px;
}
.more-bd .info{
    display: flex;
    height: 300px;
    width: 300px;
}
.more-bd .in{
    display: flex;
    height: 300px;
    width: 300px;
}
.more-bd .into{
    display: flex;
    height: 300px;
    width: 300px;
}
.more-bd .inter{
    display: flex;
    height: 300px;
    width: 300px;
}
.more-bd .left {
    float: left;
    display:flex;
    width: 100px;
    height: 300px;
    background-color: gray;
}
.more-bd .right{
    float: left;
    display:flex;
    width: 100px;
    height: 300px;
    background-color: gray;
}

想要左右浮动的效果像这样

有什么办法吗，基础知识了解不是很熟但是知道一些

Answer 1

.more-bd{
display:flex;
justify-content:space-around;
flew-wrap:wrap;
}
.info,.in,.into,.inter{
width:300px;
display:flex;
}