JSFiddle - React, Tailwind, and code Playground

by erelsgl

HTML

<table>
<caption>1-line cells</caption>
<tr>
<td 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  
</td>
<td class='col2'>
bbbbbbbb bbbbbbbb bbbbbbbb bbbbbbbb bbbbbbbb bbbbbbbb bbbbbbbb bbbbbbbb bbbbbbbb bbbbbbbb bbbbbbbb bbbbbbbb bbbbbbbb bbbbbbbb bbbbbbbb bbbbbbbb bbbbbbbb bbbbbbbb bbbbbbbb bbbbbbbb bbbbbbbb  
</td>
<td class='col3'>
cccccccc cccccccc cccccccc cccccccc cccccccc cccccccc cccccccc 
</td>
</tr>
</table>

<table>
<caption>several-line cells
<button onclick='javascript:toggleWidth("td1","50%")'>Add/Remove width</button>

</caption>
<tr>
<td 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 class='hack'>
<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...

CSS

body {font-size:8px}
.col1 {background:#fee}
.col2 {background:#efe}
.col3 {background:#eef}
table {border: dashed black 1px; margin:1em}
td {vertical-align:top}
.hack {visibility:hidden;}
.hack * {display:inline;}