在父div的底部放置不同的div，彼此相邻

Question

如何将具有不同高度的div放置在父div的底部，彼此相邻。

就像我在代码中所做的那样但是与底部对齐。

div表示制表符，其中红色表示当前活动选项卡，灰色表示非活动表格

 .pane{
            position: relative;
            display: block;
            width: 500px;
            height: 120px;
            background-color: lightgrey;
        }
        .sec{
            position: absolute;
            bottom: 0px;
            display: inline-block;
            width: 35%;
            height: 80%;
            background-color: red;
            border-right: dashed;

        }
        .thir{
            float: left;
            width: 15%;
            height: 70%;
            display: inline-block;
            background-color: grey;
            border-right: dashed;
        }

<div class="pane">
            <div class="sec"></div>
            <div class="thir"></div>
            <div class="thir"></div>
            <div class="thir"></div>
    </div>

Answer 1

可以使用柔性盒并将物品与柔性端对齐来实现。

.pane{
       display: flex;
       flex-direction: row;
       justify-content: flex-start;
       align-items: flex-end;

            width: 500px;
            height: 120px;
            background-color: lightgrey;
        }
        .sec{
            display: inline-block;
            width: 35%;
            height: 80%;
            background-color: red;
            border-right: dashed;

        }
        .thir{
            float: left;
            width: 15%;
            height: 70%;
            display: inline-block;
            background-color: grey;
            border-right: dashed;
        }

<div class="pane">
            <div class="sec"></div>
            <div class="thir"></div>
            <div class="thir"></div>
            <div class="thir"></div>
    </div>