JSFiddle - React, Tailwind, and code Playground

HTML

<ul class="list">
    <li>
        <span class="content-holder">foo</span></li>
    <li>
        <span class="content-holder">foo foo foo foo foo foo</span></li>
    <li class="highlight">
        <span class="content-holder">bar bar bar bar bar bar bar bar bar bar bar bar bar bar bar bar bar bar bar bar bar bar bar bar bar bar bar bar bar bar bar</span>
    </li>
</ul>

CSS

ul.list {
  list-style-type: none;
  margin-top: 10px;
  padding: 0;
  text-align: left;
  overflow-x: auto;
}

.highlight {
    background-color: red;
}

ul.list li {
  margin: 0;
  padding: 0 10px;
  display: inline-block;
}

.content-holder {
      font-family: Consolas,"Liberation Mono",Menlo,Courier,monospace;
  font-size: 12px;
  color: #333;
  white-space: pre;
  overflow: visible;
  -ms-word-wrap: normal;
  word-wrap: normal;
}