JSFiddle - React, Tailwind, and code Playground

by BurpmanJunior

HTML

<div class="row" data-equalize>
    <div class="content">
        <p>Vestibulum facilisis, purus nec pulvinar iaculis, ligula mi congue nunc, vitae euismod ligula urna in dolor. Donec interdum, metus et hendrerit aliquet, dolor diam sagittis ligula, eget egestas libero turpis vel mi. Nam commodo suscipit quam. Proin pretium, leo ac pellentesque mollis, felis nunc ultrices eros, sed gravida augue augue mollis justo. Fusce neque.</p>
        <p>Aenean viverra rhoncus pede. Suspendisse faucibus, nunc et pellentesque egestas, lacus ante convallis tellus, vitae iaculis lacus elit id tortor. Vestibulum facilisis, purus nec pulvinar iaculis, ligula mi congue nunc, vitae euismod ligula urna in dolor. Cras non dolor. Donec elit libero, sodales nec, volutpat a, suscipit non, turpis.</p>
        <p>Suspendisse non nisl sit amet velit hendrerit rutrum. Ut a nisl id ante tempus hendrerit. Etiam ultricies nisi vel augue. Phasellus gravida semper nisi. Phasellus accumsan cursus velit.</p>
        <p>Aliquam erat volutpat. Nullam quis ante. Suspendisse faucibus, nunc et pellentesque egestas, lacus ante convallis tellus, vitae iaculis lacus elit id tortor. Pellentesque libero tortor, tincidunt et, tincidunt eget, semper nec, quam. Ut leo.</p> <a class="bottom-link" href="#!">Find out more</a>

    </div>
    <div class="content">
        <p>Aenean viverra rhoncus pede. Suspendisse faucibus, nunc et pellentesque egestas, lacus ante convallis tellus, vitae iaculis lacus elit id tortor. Vestibulum facilisis, purus nec pulvinar iaculis, ligula mi congue nunc, vitae euismod ligula urna in dolor. Cras non dolor. Donec elit libero, sodales nec, volutpat a, suscipit non, turpis.</p>
        <p>Suspendisse non nisl sit amet velit hendrerit rutrum. Ut a nisl id ante tempus hendrerit. Etiam ultricies nisi vel augue. Phasellus gravida semper nisi. Phasellus accumsan cursus velit.</p> <a class="bottom-link" href="#!">Find out more</a>

    </div>
    <div class="content">
        <p>Aliquam...

CSS

.row:before {
    content:'';
    zoom: 1;
}
.row:after {
    content:'';
    clear: both;
    display: table;
}
.content {
    box-sizing: border-box;
    padding: 15px;
    background-color: #ddd;
    font-family: sans-serif;
    color: #333;
    margin-bottom: 20px;
    position: relative;
    padding-bottom: 30px;
}
.content a.bottom-link {
    position: absolute;
    bottom: 15px;
}
@media screen and (min-width: 640px) {
    .content {
        float: left;
        width: 33.333%;
    }
}

JavaScript

var eq = {
    init: function () {
        eq.massCheck();
        $(window).resize(eq.massCheck);
    },
    massCheck: function () {
        $('[data-equalize]').each(function () {
            eq.calcY(this);
        });
    },
    calcY: function (elem) {
        var wrapX = $(elem).width();
        var elemX = $('> div:first-child', elem).width();
        var iterations = Math.floor(wrapX / elemX);
        $('> div', elem).each(function () {
            $(this).css('height', 'auto');
        });
        if (iterations > 1) {
            // Calc heights
            var iterationArr = [];
            var elems = $('> div', elem);
            var c = 0;
            for (var i = 0; i < elems.length; i++) {
                if (iterationArr[c]) {
                    if ($(elems[i]).innerHeight() > iterationArr[c]) {
                        iterationArr[c] = $(elems[i]).innerHeight();
                    }
                } else {
                    iterationArr[c] = $(elems[i]).innerHeight();
                }
                if (i % iterations == iterations - 1) {
                    c++;
                }
            }
            // Apply heights
            var c = 0;
            for (var i = 0; i < elems.length; i++) {
                $(elems[i]).innerHeight(iterationArr[c]);
                if (i % iterations == iterations - 1) {
                    c++;
                }
            }
        }
    }
}

eq.init();