JSFiddle - React, Tailwind, and code Playground

HTML

<div id="wrapper">
    <div id="header">header text</div>
    <div id="leftColumn" class="column">
    </div>
    <div id="rightColumn" class="column"></div>
    <div id="footer">footer text</div>
</div>

CSS

html, 
body {min-height:100%; padding:0; margin:0;}

#leftColumn {background-color:blue; float:left; width:50%;}
#rightColumn {background-color:yellow; float:right; width:50%;}
#header,
#footer {background-color:red;}

JavaScript

var columns = $('.column');

function resize() {
    var height = $(window).height() - $('#header').height() - $('#footer').height();
    columns.each(function () {
        if ($(this).height() > height) {
            height = $(this).height();
        }
    });
    columns.height(height);
}

resize();
window.resize(function() {resize()});