CSS实现两栏结构自定义布局

来公司实习的时候安排了一些工作，其中有实现两栏布局和三栏布局。
html代码中一个innerFrame就是一栏。

要实现的效果图：

HTML：

<div class="outterFrame">
    <div class="innerFrame">
        <div class="headTitle"><span>选择角色</span></div>
        <div>
            <checkTree></checkTree>
        </div>
    </div>
    <div class="innerFrame">
        <div class="headTitle"><span>选择用户</span></div>
        <div>
            <checkTree></checkTree>
        </div>
    </div>
</div>

备注：checkTree是自己封装的组件（效果图中的公司和下级部门），此处你可以换成别的内容，不影响布局，只影响内容

CSS：

.outterFrame {
    border-top: 1px solid #E1E3EB;
    border-bottom: 1px solid #E1E3EB;
    width:fit-content;
    height: 350px;
    margin: 0 auto;
    display: flex;
}
.outterFrame .innerFrame {
    border-right: 1px solid #E1E3EB;
    border-left: 1px solid #E1E3EB;
    width: 300px;
    height: inherit;
}
.outterFrame .innerFrame .headTitle {
    height: 40px;
    line-height:40px;
    background-color: #F0F1F5
}
.outterFrame .innerFrame .headTitle span {
    width:70px;
    height:22px;
    font-size:14px;
    font-family:PingFangSC-Semibold,PingFang SC;
    font-weight:600;
    color:rgba(33,37,48,1);
    margin-left: 10px;
}