JSFiddle - React, Tailwind, and code Playground

HTML

<div>
  <ul>
    <li>item 1</li>
    <li>item B</li>
    <li>item 3</li>
    <li>item IV</li>
    <li>the long item</li>
    <li>item 6</li>
    <li>item 7</li>
    <li>item awesome</li>
    <li>give me your money</li>
  </ul>
</div>

CSS

div {
  overflow: hidden;
  margin: 1em;
 }
div ul {
  list-style: none;
  padding: 0;
  margin-left: -4px;
 }
div ul li {
  display: inline;
  white-space: nowrap;
}
div ul li:before {
  content: " \00b7";
}