html css等分高度

我有一个容器div，其中并排包含两个动态高度（高度未设置）div，这两个div是内容div，有时一个div的内容比另一个div的内容多，导致与另一个div的距离更长，这两个div的颜色不同，为了获得美观的页面视图，我希望这两个div具有相同的高度

我如何在不涉及javascript的情况下做到这一点

<div style="width:100px;border:1px solid black;">
    <div style="width:50px;background-color:blue;float:left;">a <br/> b</div>
    <div style="width:50px;background-color:red;float:left;">a</div>
    <div style="clear:both"></div>
</div>

a
b
A.

实例： 在上面的例子中，你可以看到蓝色的div比红色的div大，因为它包含更多的内容，我想做的是另一个div有什么内容，两个div高度相等，看起来大小相似

---

提前感谢您。

我认为，在这种情况下，没有Javascript是不可能的。但是，如果使用表，则可以进行处理。

可以使用

display:table

属性：

.parent{
    width:100px;
    display:table;
    border:1px solid green;
}
.child{
    width:50px;
    background:blue;
    display:table-cell;
}
.child + .child{background:red;}

或者看看这个：