JSFiddle - React, Tailwind, and code Playground

HTML

<section id="bottom" style="height: auto;">
    <div id="leftCol" class="column first">
        <div class="borderBox boxNo_1">
            <header class="clickable">Box #1</header>
            <ul>
                <li>Link 1</li>
                <li>Link 2</li>
                <li>Link 3</li>
                <li>Link 4</li>
                <li>Link 5</li>
            </ul>
        </div>
    </div>
    <div id="middleCol" class="column">
        <div class="borderBox boxNo_2">
            <header class="clickable">Box #2</header>
            <ul>
                <li>Link 1</li>
                <li>Link 2</li>
            </ul>
        </div>
        <div class="borderBox boxNo_3">
            <header class="clickable">Box #3</header>
            <ul>
                <li>Link 1</li>
            </ul>
        </div>
    </div>
    <div id="rightCol" class="column last">
        <div class="borderBox boxNo_4">
            <header class="clickable">Box #4</header>
            <ul>
                <li>Link 1</li>
                <li>Link 2</li>
                <li>Link 3</li>
                <li>Link 4</li>
                <li>Link 5</li>
                <li>Link 6</li>
                <li>Link 7</li>
            </ul>
        </div>
    </div>
</section>

CSS

body, * {
    -moz-box-sizing: border-box;
    -webkit-box-sizing: border-box;
    box-sizing: border-box;
}

#bottom {
    position: relative;
    overflow: hidden;
    width: 100%;
    border: 1px solid red;
}

.column {
    border: 1px solid black;
/*    clear: none;
    display: inline;
    float: left;
    margin-right: 1.695%;
    width: 32.203%;
*/}

/*.column:last-of-type {
    display: inline;
    float: right;
    margin-right: 0;
}
*/
.borderBox {
    border : 1px solid blue;
    margin-top : 5px;
}

.borderBox header {
    color : white;
    background : black;
}

#leftCol
{
    position: absolute;
    bottom: 0px;
    top:0px;
}

JavaScript

/*$(function() {
    var isCalculating = false;
    var boxResizer = function() {
        if (isCalculating) {
            return;
        }

        isCalculating = true;
        var height = $('#bottom').innerHeight();
        $('#bottom .column').each(function() {
            // Calculate sum of height for all elements in a column container.
            var inner = 0;
            $(this).children().each(function() {
                inner += $(this).outerHeight(true);
            });

            var diff = height - inner; // Compare the sum against container height, and calculate the difference
            // Set height of last element to compensate for the difference
            var lastChild = $(this).children(':last-child');
            lastChild.height(lastChild.height() + diff);
        });
        isCalculating = false;
    };
    $(window).resize(function() {
        boxResizer();
    });
    boxResizer();
});
*/