JSFiddle - React, Tailwind, and code Playground

HTML

<div class="wrapper">
    <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 barbar bar bar bar bar barbar bar bar bar bar barbar bar bar bar bar bar</span>

        </li>
    </ul>
</div>

CSS

div.wrapper {
    overflow-x: auto;
}
ul.list {
    list-style-type: none;
    padding: 0;
    margin: 0;
    text-align: left;
    display: table;
    width: 100%;
}
.highlight {
    background-color: red;
}
ul.list li {
    margin: 0;
    padding: 0;
    display: table-row;
    width: 100%;
}
.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;
}