JSFiddle - React, Tailwind, and code Playground

HTML

<table>
<tr>
<td>
  <div class="div1">
    <div class="inner">
    qqq
    </div>
  </div>
  <div class="div2">
    <div class="inner">
    www
    </div>
  </div>
  <div class="div3">
    <div class="inner">
    eee
    </div>
  </div>
</td>
<td>
    <div class="div1">
    <div class="inner">
    rrrrrr
    </div>
  </div>
  <div class="div2">
    <div class="inner">
    tttttttt<br />ppppp
    </div>
  </div>
  <div class="div3">
    <div class="inner">
    yyyyyyyyyyyyyyyyyyyyyyyy
    </div>
  </div>
</td>
<td>
    <div class="div1">
    <div class="inner">
    nnnnnnnnnnnnnnnnnnnnnnnnnnnnnnnnnnnnnnnn
    </div>
  </div>
  <div class="div2">
    <div class="inner">
    jj
    </div>
  </div>
  <div class="div3">
    <div class="inner">
    bbffgtreg
    </div>
  </div>
</td>
</tr>
</table>

CSS

html{background-color: #000000;}
td{height:400px;}
td > div{height:33.333%; display:table; width: 100%;}
.div1{background-color:#FFFFFF;}
.div2{background-color:#0B4EA2; }
.div3{background-color:#EE1C25;}
.inner{display:table-cell;}
.div1 > .inner{ vertical-align:top; }
.div2 > .inner{ vertical-align:middle; }
.div3 > .inner{ vertical-align:bottom; }