JSFiddle - React, Tailwind, and code Playground

HTML

<table>
<tbody>
  <tr>
    <td class="narrow">sdkajdwaudawjdjawhdwjahdawjdhajh</td>
    <td>hi</td>
  </tr>
  <tr>
    <td>hi</td>
    <td>hi</td>
  </tr>
</tbody>
</table>

<table>
<tbody>
  <tr>
    <td class="narrow">hi</td>
    <td>hi</td>
  </tr>
  <tr>
    <td>sdkajdwaudawjdjawhdwjahdawjdhajh</td>
    <td>hi</td>
  </tr>
</tbody>
</table>

CSS

table {
  table-layout: fixed;
}

td {
  border: 1px solid #000;
  overflow: hidden;
  overflow-wrap: break-word;
}

.narrow {
  max-width: 20px; /* Without this, the first table doesn't work either! */
  width: 20px;
}