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>aaaaaaaa aaaaaaaa aaaaaaaa</div> 
</td>
<td id='td2' 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 id='td3' class='col3'>
cccccccc cccccccc cccccccc cccccccc cccccccc cccccccc cccccccc 
</td>
</tr>
</table>
<script type='text/javascript'>
function toggleWidth(elementid,width) {
  var element =...

CSS

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