JSFiddle - React, Tailwind, and code Playground

HTML

<div class="outer">
    <div class="float-wrap">
        <div class="left-floater">
            One
        </div>
        <div class="left-floater">
            Two
        </div>
        <div class="left-floater">
            Three
        </div>
        <div class="left-floater">
            I should be to the left of "Three"
        </div>
        <div class="left-floater">
            I float.
        </div>
        <div class="left-floater">
            I float.
        </div>
        <div class="left-floater">
            I float.
        </div>
        <div class="left-floater">
            I float.
        </div>
    </div>
</div>

CSS

.float-wrap {
  /* 816 = <number of floats> * (<float width> + 2 * <float border width>) */
  width:816px;
  border:1px solid;
  /* causes .vertical-scroll's height to match its child divs' */
  overflow:auto;
}
.left-floater {
  width:100px;
  height:100px;
  border:1px solid;    
  float:left;
}

.outer {
  overflow-x: scroll;   
}