JSFiddle - React, Tailwind, and code Playground

by yoowordpress

HTML

<link rel="stylesheet" href="http://getbootstrap.com/dist/css/bootstrap.min.css">
<div class="container">
    <div class="col-xs-6 col-sm-4 col-md-3 col">
         <h2>1</h2><span>ffffff<br>dfgfdgf</span>

    </div>
    <div class="col-xs-6 col-sm-4 col-md-3 col">
         <h2>2 ccccccc ccccccccccc cccccccccccc cccccccccccc ccccccccccc ccccc</h2><span>ffffffff</span>

    </div>
    <div class="col-xs-6 col-sm-4 col-md-3 col">
         <h2>3</h2><span>ffffff</span>

    </div>
    <div class="col-xs-6 col-sm-4 col-md-3 col">
         <h2>4</h2><span>ffffffff<br>dfgf<br>dfgfdgf</span>

    </div>
    <div class="col-xs-6 col-sm-4 col-md-3 col">
         <h2>5</h2><span>fffffff</span>

    </div>
    <div class="col-xs-6 col-sm-4 col-md-3 col">
         <h2>6cccccccc ccccccccc</h2><span>ffffffff</span>

    </div>
    <div class="col-xs-6 col-sm-4 col-md-3 col">
         <h2>7</h2><span>ffffff<br>dfgfdgf</span>

    </div>
    <div class="col-xs-6 col-sm-4 col-md-3 col">
         <h2>8</h2><span>ffffffff</span>

    </div>
    <div class="col-xs-6 col-sm-4 col-md-3 col">
         <h2>9</h2><span>ffffff<br>dfgfdgf<br>dfgfdgf<br>dfgfdgf</span>

    </div>
</div>

CSS

.container {
    padding: 0;
}

span {
    background-color: red;
    display: block;
}

JavaScript

function resizer($elem, $container, $target) {
    var $width_container = $($container).width(),
        $width_item = $($elem + ':eq(0)').width(),
        $count_in_row = parseInt($width_container / $width_item),
        $count_items = $($elem).length,
        $rows_count = $count_items / $count_in_row,
        $n = 1,
        $a = 0;

    $($elem).each(function(i) {
        if ($n % $count_in_row == 1) $a++;
        $(this).find($target).addClass('span-' + $target + $a);

        if ($n % $count_in_row == 0) {
            var mainDivs = document.getElementsByClassName('span-'+ $target + $a);
            var maxHeight = 0;
            for (var i = 0; i < mainDivs.length; ++i) {
                if (maxHeight < mainDivs[i].clientHeight) {
                    maxHeight = mainDivs[i].clientHeight;
                }
            }
            for (var i = 0; i < mainDivs.length; ++i) {
                mainDivs[i].style.height = maxHeight + "px";
            }
        }


        $n++;
    });
}
resizer('.col', '.container', 'span');
resizer('.col', '.container', 'h2');

$(window).resize(function() {
    resizer('.col', '.container', 'span');
    resizer('.col', '.container', 'h2');
})