JSFiddle - React, Tailwind, and code Playground

HTML

<div class="parent">
    <div class="child" style="background-color: #00f; width: 32%; float: left;"> foo<br/>bar<br/>bar</div>
    <div class="child" style="background-color: #0f0; width: 32%; float: left; "> foo</div>
    <div class="child" style="background-color: #f00; width: 32%; float: left; "> foo <br /> bar </div>
</div>

CSS

.parent {
  min-height: 100%;
  display: table; 
}
.child {
  display: table-cell;
  vertical-align: middle; 
}