JSFiddle - React, Tailwind, and code Playground

HTML

<div id="container">
	<div id="col1" class="col">
		<div>1<br />Lorem ipsum dolor sit amet, Lorem ipsum dolor sit amet, </div>
		<div>2<br />Lorem ipsum dolor sit amet, Lorem ipsum dolor sit amet, Lorem ipsum dolor sit amet, Lorem ipsum dolor sit amet, Lorem ipsum dolor sit amet, </div>
		<div>3<br />Lorem ipsum dolor sit amet </div>
	</div>

	<div id="col2" class="col">
		<div>4<br />Lorem ipsum dolor sit amet, </div>
		<div>5<br />Lorem ipsum dolor sit amet, Lorem ipsum dolor sit amet, Lorem ipsum dolor sit amet, Lorem ipsum dolor sit amet, Lorem ipsum dolor sit amet, Lorem ipsum dolor sit amet, </div>
		<div>6<br />Lorem ipsum dolor sit amet, Lorem ipsum dolor sit amet, Lorem ipsum dolor sit amet, Lorem ipsum dolor sit amet, Lorem ipsum dolor sit amet, Lorem ipsum dolor sit amet, Lorem ipsum dolor sit amet, Lorem ipsum dolor sit amet, Lorem ipsum dolor sit amet, </div>
	</div>

	<div id="col3" class="col">
		<div>7<br />Lorem ipsum dolor sit amet, Lorem ipsum dolor sit amet, </div>
		<div>8<br />Lorem ipsum dolor sit amet, Lorem ipsum dolor sit amet, Lorem ipsum dolor sit amet, </div>
		<div>9<br />Lorem ipsum dolor sit amet, Lorem ipsum dolor sit amet, Lorem ipsum dolor sit amet, Lorem ipsum dolor sit amet, Lorem ipsum dolor sit amet, </div>
	</div>
	<div style="clear:both"></div>
</div>

<input count="2" type="button" value="two" />
<input count="3" type="button" value="three" />
<input count="4" type="button" value="four" />
<input count="5" type="button" value="five" />

CSS

.col {
		float: left;
		margin-left: 5px;
	}
	
	.col div {
		background: #aaa;
		border: 1px solid #aaa;
		margin-top: 5px;
		width: 150px;
	}
	
	.cls {
		clear: both;
	}

JavaScript

$(document).ready(function () {
    fixHeight();
    $('input').on('click', function () {
        renderCols(this.getAttribute('count'));
    });
});

function renderCols(count) {
    cont = document.getElementById('container');
    cont.innerHTML = '';
    var cols = [];
    for (i = 1; i <= count; i += 1) {
        div = document.createElement('div');
        div.className = 'col';
        cont.appendChild(div);
        cols.push(div);
    }
    for (i = 0; i < 9; i += 1) {
        cols[i % count].innerHTML += window['block' + i];
    }
    
    div = document.createElement('div');
    div.className = 'cls';
    cont.appendChild(div);
    fixHeight();
}

function fixHeight() {
    var total = parseInt(document.getElementById('container').offsetHeight);
    var cols = document.getElementsByClassName('col');
    for (i = 0; i < cols.length; i += 1) {
        col = cols[i];
        last = $(col).children().last();
        diff = parseInt(col.offsetHeight);
        curr = parseInt(last[0].offsetHeight);
        last.css('height', curr + (total - diff) + 'px');
    }
}
	
	block0 = '<div>1<br />Lorem ipsum dolor sit amet, Lorem ipsum dolor sit amet, </div>'
	block1 = '<div>2<br />Lorem ipsum dolor sit amet, Lorem ipsum dolor sit amet, Lorem ipsum dolor sit amet, Lorem ipsum dolor sit amet, Lorem ipsum dolor sit amet, </div>'
	block2 = '<div>3<br />Lorem ipsum dolor sit amet </div>'
	block3 = '<div>4<br />Lorem ipsum dolor sit amet, </div>'
	block4 = '<div>5<br />Lorem ipsum dolor sit amet, Lorem ipsum dolor sit amet, Lorem ipsum dolor sit amet, Lorem ipsum dolor sit amet, Lorem ipsum dolor sit amet, Lorem ipsum dolor sit amet, </div>'
	block5 = '<div>6<br />Lorem ipsum dolor sit amet, Lorem ipsum dolor sit amet, Lorem ipsum dolor sit amet, Lorem ipsum dolor sit amet, Lorem ipsum dolor sit amet, Lorem ipsum dolor sit amet, Lorem ipsum dolor sit amet, Lorem ipsum dolor sit amet, Lorem ipsum dolor sit amet, </div>'
	block6 = '<div>7<br />Lorem ipsum dolor sit amet,...