JSFiddle - React, Tailwind, and code Playground

HTML

<table class="highlighttable">
<tr>
<td class="linenos">
  <div class="linenodiv"><pre>1
2</pre>
  </div>
</td>
<td class="code">
  <div class="highlight"><pre>

let variable = <span class="s">&quot;A very long string goes here and it doesn't span multiple lines but makes the table/div scroll (incorrectly)  instead.&quot;</span></pre>
  </div>
</td>
</tr>
</table>

CSS

.highlight pre {
  color: #C1C2C3;
}

.highlighttable .linenos {
   background-color: #C1C2C3;
   padding: 0 5px;
}

.highlighttable .code {
  background: #343642;
}

.highlighttable {
  border-radius: 5px;
  overflow-x: auto;
  display: block;
  border-collapse: collapse;
  border-spacing: 0;
}