JSFiddle - React, Tailwind, and code Playground

HTML

<table border="0" cellspacing="0" cellpadding="0">
  <tr>
    <td class="leftcolumn">This is the left column. It is set to 20% width.</td>
    <td class="centercolumn">
        <p>Hi,</p>
        <p>IwanttowrapatextthatisaddedtotheTD.Ihavetriedwithstyle="word-wrap:break-word;"width="15%".Butthewrapisnothappening.Isitmandatorytogive100%width?ButI havegotothercontrolstodisplaysoonly15%widthavailable.</p>
        <p>Need help.</p>
        <p>TIA.</p>
    </td>
    <td class="rightcolumn">Thisisthe right column, it has no width so it assumes the remainder from the 15% and 20% assumed by the others. By default, if a width is applied and no white-space declarations are made, your text will automatically wrap.</td>
  </tr>
</table>

CSS

td { vertical-align: top; }
.leftcolumn { background: #CCC; width: 20%; padding: 10px; }
.centercolumn { background: #999; padding: 10px; width: 15%; }
.rightcolumn { background: #666; padding: 10px; }