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

<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;
}

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

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

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

Flex 布局教程：语法篇 - 阮一峰的网络日志 https://www.ruanyifeng.com/blog/2015/07/flex-grammar.html fle

flex布局视频教程:
第二阶段-移动Web网页开发(Flex 弹性布局) 新编程 xinbiancheng.cn http://www.xinbiancheng.cn/flex.html?chapterID=3&yqm=bbdcf5719dea49cead150ea7a2a50b2d
实战案例效果如下: