JSFiddle - React, Tailwind, and code Playground

HTML

<div class="vertical-scroll">
  <div class="left-floater">
    One
  </div>
  <div class="left-floater" style="left:110px">
    Two
  </div>
  <div class="left-floater" style="left:220px">
    Three
  </div>
  <div class="left-floater" style="left:330px">
    I should be to the left of "Three"
  </div>
  <div class="left-floater" style="left:440px">
    I float.
  </div>
  <div class="left-floater" style="left:550px">
    I float.
  </div>
  <div class="left-floater" style="left:660px">
    I float.
  </div>
  <div class="left-floater" style="left:770px">
    I float.
  </div>
</div>

CSS

.vertical-scroll {
  min-width:400px;
  border:1px solid;
  overflow-x:scroll;
  overflow-y:auto;
  height:120px;   
  position:relative;    
}
.left-floater {
  width:100px;
  height:100px;
  border:1px solid;    
  position:absolute;
  left:0;
}