JSFiddle - React, Tailwind, and code Playground

by Simon Henshall

HTML

<body style="padding-top: 0px; padding-left: 10px; padding-right: 10px; margin: 0px; overflow-y: scroll; overflow-x: hidden; background-color: white;">
  <table style="width: 100px; height: 100px;">
    <tr style="width: 100px; height: 100px;">
      <td style="vertical-align:bottom; text-align:center; border-style: solid; width: 45%; height: 100px;">
        <div style="height: 100px; overflow:hidden; display:flex; align-items:flex-end;">
          just some text.
        </div>
      </td>
      <td style="vertical-align:bottom; text-align:center; border-style: solid; width: 10%; height: 100px;">
        <div style="height: 100px; overflow:hidden; display:flex; align-items:flex-end;">
          some more text, just a little bit more than the other cell. I'm looking for some overflow to this thing.
        </div>
      </td>
      <td style="vertical-align:bottom; text-align:center; border-style: solid; width: 45%; height: 100px;">
        <div style="height: 100px; overflow:hidden; display:flex; align-items:flex-end;">
          just some text.
        </div>
    </tr>
  </table>
</body>