JSFiddle - React, Tailwind, and code Playground
HTML
<div id="container">
<div id="col1" class="col">
<div>Lorem ipsum dolor sit amet, Lorem ipsum dolor sit amet, </div>
<div>Lorem ipsum dolor sit amet, Lorem ipsum dolor sit amet, Lorem ipsum dolor sit amet, Lorem ipsum dolor sit amet, Lorem ipsum dolor sit amet, </div>
<div>Lorem ipsum dolor sit amet </div>
</div>
<div id="col2" class="col">
<div>Lorem ipsum dolor sit amet, </div>
<div>Lorem ipsum dolor sit amet, Lorem ipsum dolor sit amet, Lorem ipsum dolor sit amet, Lorem ipsum dolor sit amet, Lorem ipsum dolor sit amet, Lorem ipsum dolor sit amet, </div>
<div>Lorem ipsum dolor sit amet, Lorem ipsum dolor sit amet, </div>
</div>
<div id="col3" class="col">
<div>Lorem ipsum dolor sit amet, Lorem ipsum dolor sit amet, </div>
<div>Lorem ipsum dolor sit amet, Lorem ipsum dolor sit amet, Lorem ipsum dolor sit amet, </div>
<div>Lorem ipsum dolor sit amet, Lorem ipsum dolor sit amet, Lorem ipsum dolor sit amet, Lorem ipsum dolor sit amet, Lorem ipsum dolor sit amet, </div>
</div>
<div style="clear:both"></div>
</div>
CSS
.col {
float: left;
margin-left: 5px;
}
.col div {
background: #aaa;
border: 1px solid #aaa;
margin-top: 5px;
width: 150px;
}
JavaScript
var total = parseInt(document.getElementById('container').offsetHeight);
var cols = document.getElementsByClassName('col');
for (i in cols) {
col = cols[i];
last = col.children[2];
diff = parseInt(col.offsetHeight);
curr = parseInt(last.offsetHeight);
last.style.height = curr + (total - diff) + 'px';
}