display table test

HTML

<div class="outer"
    ><div class="inner">Box 1</div
    ><div class="inner">Box 2<br>next line<br>next line</div>
    ><div class="inner">Box 3</div>
</div>
        
<div class="outer"
    ><div class="inner">Box 3<br>next line<br>next line<br>next line</div
    ><div class="inner">Box 4</div>
</div>

CSS

div {-moz-box-sizing: border-box; -webkit-box-sizing: border-box; box-sizing: border-box;}
.outer {display:table; height: 100%; width: 96%; margin: 0 2% 20px;}
.inner {display: inline-table; height: 100%; width: 33%; border: 1px solid #999;}
.inner:first-child {margin-right: 2%;}