JSFiddle - React, Tailwind, and code Playground

HTML

<div id="container">
  <div class="section">
    <div class="columns-container">
      <div class="column" id="a"> Contents A </div>
      <div class="column" id="b"> Contents B </div>
      <div class="column" id="c"> Contents C </div>
    </div>
  </div>
</div>

CSS

#container {
	display: table;
	height: 100%;
	width: 100%;
}
/* All sections (container's children) should be table rows with minimal height */

.section {
	display: table-row;
	min-height: 1px;
}

/* We need one extra container, setting it to full width */
.columns-container {
	display: table-cell;
	height: 80px;
	width:80px;
	text-align: center;
}

#a {
	background-color: pink;
}
#b {
	background-color: lightgreen;
}
#c {
	background-color: lightblue;
}