JSFiddle - React, Tailwind, and code Playground

by r043v

HTML

<div class="col-small">
    <div>hey<br/>hey<br/>hey</div>
    <div>aie aie aie</div>
    <div>dafuck</div>
</div>

<div class="col-small">
    <div>one</div>
    <div>two<br/>two</div>
</div>

CSS

.col-small { background:pink; float:left; margin-left:20px; width:100px; }

JavaScript

var elems = [], $elems = $('.col-small, .img_hover');

$elems.each(function(i){
    var $t = $(this);
    var $c = $t.children();
    elems[i] = { $:$t, $c:$c, nb:$c.length };
});

function getHeight(e,i){
    var total=0,n=0;
    while(n < e.nb)
        total += e.$c.eq(n++).outerHeight();
    //console.log("total of "+i+" => "+total)
    return total;
}

function setTheHeight(){
    $elems.height( Math.max.apply(Math, $.map(elems,getHeight)) );
}

$(window).resize(setTheHeight).resize();

/*you can also try not done the effective resize at each pixel change

var timer = false;
$(window).resize(function(){
    if(timer !== false) return; // or clearTimeout(timer);
    timer = setTimeout(function(){
        setTheHeight();
        timer = false;
    },20); // 20ms => 50fps max
});*/