JSFiddle - React, Tailwind, and code Playground

by Evgenii Malikov

HTML

<div class="container">
  <div>
  left sidebar
  </div>
  <div class="">
    <p>
      content
    </p>
    <div class="list">
      <ul>
        <li>first bullet</li>
        <li>second bullet</li>
        <li>third bullet</li>
        <li>fourth bullet</li>
        <li>fifth bullet</li>
        <li>sixsth bullet</li>
        <li>seventh bullet</li>
        <li>eighth bullet</li>
      </ul>
    </div>
  </div>
</div>

CSS

div {border: 1px solid lime}
div.container {display: flex}
div.list{overflow-x: scroll}
li{display: inline-block; text-decoration: underline; white-space: nowrap}
ul{overflow: visible; display: flex; flex-shrink: 0; flex-wrap: nowrap}