JSFiddle - React, Tailwind, and code Playground

HTML

<h2>one-paragraph cells</h2>
<div style='display:table; width:100%; height:100%'>
<div style='display:table-row; width:100%; height:100%'>
<div class='col1'>
aaaaaaaa aaaaaaaa aaaaaaaa aaaaaaaa aaaaaaaa aaaaaaaa aaaaaaaa aaaaaaaa aaaaaaaa aaaaaaaa aaaaaaaa aaaaaaaa aaaaaaaa aaaaaaaa aaaaaaaa aaaaaaaa aaaaaaaa aaaaaaaa aaaaaaaa aaaaaaaa aaaaaaaa aaaaaaaa aaaaaaaa aaaaaaaa aaaaaaaa aaaaaaaa aaaaaaaa aaaaaaaa aaaaaaaa aaaaaaaa aaaaaaaa aaaaaaaa aaaaaaaa aaaaaaaa  
</div>
<div class='col2'>
bbbbbbbb bbbbbbbb bbbbbbbb bbbbbbbb bbbbbbbb bbbbbbbb bbbbbbbb bbbbbbbb bbbbbbbb bbbbbbbb bbbbbbbb bbbbbbbb bbbbbbbb bbbbbbbb bbbbbbbb bbbbbbbb bbbbbbbb bbbbbbbb bbbbbbbb bbbbbbbb bbbbbbbb  
</div>
<div class='col3'>
cccccccc cccccccc cccccccc cccccccc cccccccc cccccccc cccccccc 
</div>
</div>
</div>


<h2>many-paragraph cells</h2>
<!-- button onclick='javascript:toggleWidth("td1","50%")'>Add/Remove width</button -->
<div style='display:table; width:100%; height:100%'>
<div style='display:table-row; width:100%; height:100%'>
<div id='td1' class='col1'>
<div>aaaaaaaa aaaaaaaa aaaaaaaa</div>
<div>aaaaaaaa aaaaaaaa aaaaaaaa</div>
<div>aaaaaaaa aaaaaaaa aaaaaaaa</div>
<div>aaaaaaaa aaaaaaaa aaaaaaaa</div>
<div>aaaaaaaa aaaaaaaa aaaaaaaa</div>
<div>aaaaaaaa aaaaaaaa aaaaaaaa</div>
<div>aaaaaaaa aaaaaaaa aaaaaaaa</div>
<div>aaaaaaaa aaaaaaaa aaaaaaaa</div>
<div>aaaaaaaa aaaaaaaa aaaaaaaa</div>
<div>aaaaaaaa aaaaaaaa aaaaaaaa</div>
<div>aaaaaaaa aaaaaaaa aaaaaaaa</div>
<div>aaaaaaaa aaaaaaaa aaaaaaaa</div>
<div>aaaaaaaa aaaaaaaa aaaaaaaa</div>
<div>aaaaaaaa aaaaaaaa aaaaaaaa</div>
<div>aaaaaaaa aaaaaaaa aaaaaaaa</div>
<div>aaaaaaaa aaaaaaaa aaaaaaaa</div>
<div>aaaaaaaa aaaaaaaa aaaaaaaa</div>
<div>aaaaaaaa aaaaaaaa aaaaaaaa</div>

</div>
<div class='col2'>
bbbbbbbb bbbbbbbb bbbbbbbb
bbbbbbbb bbbbbbbb bbbbbbbb
bbbbbbbb bbbbbbbb bbbbbbbb
bbbbbbbb bbbbbbbb bbbbbbbb
bbbbbbbb bbbbbbbb bbbbbbbb

</div>
<div class='col3'>
cccccccc cccccccc cccccccc
    cccccccc cccccccc cccccccc
cccccccc...

CSS

html {width:100%;}
body {font-size:8px; width:100%}
.col1 {background:#fee; display:table-cell; height:100%;}
.col2 {background:#efe; display:table-cell;height:100%;}
.col3 {background:#eef; display:table-cell;height:100%;}
table {border: dashed black 1px; margin:1em}
td {vertical-align:top}