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: 400px; height: 400px;">
    <tr style="width: 400px; height: 400px;">
      <td style="vertical-align:bottom; border-style: solid; width: 45%; max-width: 180px; height: 400px;">
        <div style="height: 400px; overflow:hidden; display:flex; align-items:flex-end;">
          <div style="margin: 0 auto;">
            just some text.
          </div>
        </div>
      </td>
      <td style="vertical-align:bottom; border-style: solid; width: 10%; max-width: 40px; height: 400px;">
        <div style="height: 400px; overflow:hidden; display:flex; align-items:flex-end;">
          <div style="margin:0 auto;">
            some more text, just a little bit more than the other cell. I'm looking for some overflow to this thing.
          </div>
        </div>
      </td>
      <td style="vertical-align:bottom; border-style: solid; width: 45%; max-width: 180px; height: 400px;">
        <div style="height: 400px; overflow:hidden; display:flex; align-items:flex-end;">
          <div style="margin: 0 auto;">
            just some text.
          </div>
        </div>
    </tr>
  </table>
</body>