JSFiddle - React, Tailwind, and code Playground

by Rob Sedgwick

HTML

<table>
  <tr>
    <td>Could be short or maybe it could be long</td>
    <td class="samewidth">Col2 Long Text</td>
    <td class="samewidth">Col3 Some More Long Text</td>
    <td class="samewidth">Col4 Some More Long Text and a bit more on top</td>
    <td>Could be short or long</td>
    <tr>
</table>

CSS

table {
  width: 100%;
  border: 1px solid black;
}

tr {
  display: flex;
}

td {
  border: 1px solid black;
}

td.samewidth {
/*   width: 25%; */
  overflow: hidden;
  flex-grow: 1;
  display: inline-block;
  flex-basis: 0;
}

td:not(.samewidth) {
  flex-basis: content;
}