JSFiddle - React, Tailwind, and code Playground

HTML

<div class="table">
	<div class="cell">
		<div class="grey">Block one</div>
	</div>
	<div class="cell">
		<div class="grey">Block two</div>
	</div>
	<div class="cell">
		<div class="grey">Block three</div>
	</div>
</div>
<div class="table">
	<div class="cell">
		<div class="grey">Block</div>
	</div>
	<div class="cell">
		<div class="grey">Block two</div>
	</div>
</div>
<div class="table">
	<div class="cell">
		<div class="grey">Block one</div>
	</div>
	<div class="cell">
		<div class="grey">Block two</div>
	</div>
	<div class="cell">
		<div class="grey">Block three</div>
	</div>
	<div class="cell">
		<div class="grey">Block four</div>
	</div>
</div>
<div class="table">
	<div class="cell">
		<div class="grey">x</div>
	</div>
	<div class="cell">
		<div class="grey">xx</div>
	</div>
	<div class="cell">
		<div class="grey">xxx</div>
	</div>
	<div class="cell">
		<div class="grey">xxxx</div>
	</div>
	<div class="cell">
		<div class="grey">xxxxxx</div>
	</div>
	<div class="cell">
		<div class="grey">Block five test</div>
	</div>
</div>
<div class="table">
	<div class="cell">
		<div class="grey">Block</div>
	</div>
	<div class="cell">
		<div class="grey">Block two</div>
	</div>
	<div class="cell">
		<div class="grey">Block three</div>
	</div>
</div>

CSS

.table {
	display: table;
	height: 100px;
	width: 100%;
}

.cell {
	display: table-cell;
	height: 100%;
	padding: 10px;
	width:16.666%;
}

.grey {
	background-color: #666;
	height: 100%;
	text-align:center;
	font-size:1.5em;
	color:#fff;
	font-family:"Helvetica Neue", Helvetica, Arial, sans-serif;
	font-weight:300;

}