JSFiddle - React, Tailwind, and code Playground

by Mark Hendricks

HTML

<div class="wrapper">
  <div class="left">
    <div>Some not so long string and more</div>
    <div>Some not so long string and more</div>
    <div>Some not so long string</div>
    <div>Some not so long string</div>
    <div>Some not so long string</div>
    <div>Some not so long string</div>
    <div>Some not so long string</div>
    <div>Some not so long string</div>
    <div>Some not so long string</div>
    <div>Some not so long string</div>
    <div>Some not so long string</div>
    <div>Some not so long string</div>
    <div>Some not so long string</div>
  </div>
</div>

CSS

.wrapper {
  position: absolute;
}
.left {
  height: 150px;
  display: inline-block;
  position: relative;
  overflow: auto;
}
.left > div {
  white-space: nowrap;
  padding-left: 20px;
}