JSFiddle - React, Tailwind, and code Playground

HTML

<div class="columnsHolder">
    <div class="column">
        <div class="content">
            hello I'm column1
        </div>
    </div>
    <div class="column">
        <div class="content">
            hello I'm column2
            <br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/>
            I like being tall.
        </div>
    </div>
    <div class="column">
        <div class="content">
            hello I'm column3
        </div>
    </div>
</div>

CSS

html, body{
    height:100%;
    margin:0;
}
.columnsHolder{
    display:table;
    height:100%;
}
.column{
    display:table-cell;
    height:100%;
    padding:0 10px;
    background:red;
}
.content{
    display:table;
    height:100%;
    background:yellow;
}

JavaScript

$(window).load(function(){
				//Detect if < IE11
				if(document.documentMode){
					setColContentHeights();
					$(window).resize(function(){
						setColContentHeights();												
					});
				}
			});
			function setColContentHeights(){
				$('.columnsHolder').each(function(){
					var maxContentHeight = 0;
					var colContent = $(this).find('.column > .content');
					colContent.each(function(){
						$(this).css('height','');  //Reset any previous height setting.
						//workout heighest column height.
						if($(this).height() > maxContentHeight) maxContentHeight = $(this).height();
					});
					colContent.each(function(){
						//apply height if required.
						if($(this).height() < maxContentHeight)$(this).height(maxContentHeight);
					});
				});
			}