让孩子们div最高的孩子的身高

Question

我<div>在父容器中有两个子元素<div>，如下所示：

<div class="row">
    <div class="item">
        <p>Sup?</p>
    </div>
    <div class="item">
        <p>Sup?</p>
        <p>Wish that other guy was the same height as me</p>
    </div>
</div>

我尝试了以下CSS：

.item {
    background: rgba(0,0,0,0.1);
    display: inline-block;
}

.row {
    border: 1px solid red;
}

我怎样才能让两个孩子（div.item）都达到最高的孩子的身高？

Answer 1

一种解决方案是将后代元素的显示值从inline-block更改table-cell为div.item：

.row {
    border: 1px solid red;
    display: table;
    border-spacing: 20px; /* For controlling spacing between cells... */
}
.item {
    background: rgba(0,0,0,0.1);
    display: table-cell;
}