JSFiddle - React, Tailwind, and code Playground
HTML
<div id='object_group'>
<div id='column1'>
text text text text text text text
</div>
<div id='column2'>
text text text text text text text text text text text text text text text text text text text text
</div>
<div id='column3'>
text text text text text text text text text text text
</div>
<div id='column4'>
text text text text text text text text text
</div>
</div>
CSS
#column1 {
float:left;
width:40px;
height:auto;
border:1px solid #444;
border-top:7px solid #444;
margin:0 5px 0 5px;
}
#column2 {
float:left;
width:40px;
height:auto;
border:1px solid #444;
border-bottom:20px solid #444;
margin:0 5px 0 5px;
}
#column3 {
float:left;
width:40px;
height:auto;
border:1px solid #444;
margin:0 5px 0 5px;
padding: 5px;
}
#column4{
float:left;
width:40px;
height:auto;
border:1px solid #444;
border-top:4px solid #444;
margin:0 5px 0 5px;
}
JavaScript
//Dynamic Equal Height Columns *Pure JS
function eqHeight(parent_id) {
var child = document.getElementById(parent_id).childNodes, childAmount = child.length, boxHeight = 0;
// Find the greatest height
for(var i = childAmount - 1; i >= 0; i--) {
if(child[i].offsetHeight && child[i].offsetHeight > boxHeight) {
child[i].style.height = '';
boxHeight = child[i].offsetHeight;
}
}
// Apply the greatest height to all child elements while accounting for padding and borders
for(var i = childAmount - 1; i >= 0; i--) {
if(child[i].offsetHeight) {
child[i].style.height = boxHeight + 'px';
}
if(child[i].offsetHeight > boxHeight) {
child[i].style.height = boxHeight - (child[i].offsetHeight - child[i].clientHeight) + 'px';
child[i].style.height = boxHeight - ((child[i].offsetHeight - boxHeight) + (child[i].offsetHeight - child[i].clientHeight)) + 'px';
}
}
}
window.onload = function() { eqHeight('object_group'); }
window.onresize = function() { eqHeight('object_group'); }