JSFiddle - React, Tailwind, and code Playground

HTML

<div class="wrapper">
    <table>
        <tr>
            <td><div class="div-in-td">One</div></td>
            <td><div class="div-in-td">Two</div></td>
            <td><div class="div-in-td">Three</div></td>
            <td><div class="div-in-td">I should be to the left of "Three"</div></td>
            <td><div class="div-in-td">I float.</div></td>
            <td><div class="div-in-td">I float.</div></td>
            <td><div class="div-in-td">I float.</div></td>
            <td><div class="div-in-td">I float.</div></td>
        </tr>
    </table>
</div>

CSS

.wrapper {
  width:400px;
  border:1px solid red;
  overflow-x:scroll;
  overflow-y:auto;    
}
.div-in-td {
  width:100px;
  height:100px;
  border:1px solid;    
}