JSFiddle - React, Tailwind, and code Playground

HTML

<table>
  <tr>
    <td>Name</td>
    <td>Text</td>
  </tr>
  <tr>
    <td>Default</td>
    <td>A very very very very very very very very very very very very very very very very very very long string</td>
  </tr>
</table>
<table>
  <tr>
    <td><pre>Name</pre></td>
    <td><pre>Text</pre></td>
  </tr>
  <tr>
  <td><pre>&lt;pre&gt; wrapped</pre></td>
    <td><pre>A very very very very very very very very very very very very very very very very very very long string</pre></td>
  </tr>
</table>
<table class="prefomatted">
  <tr>
    <td>Name</td>
    <td>Text</td>
  </tr>
  <tr>
    <td>[css] white-space:pre</td>
    <td>A very very very very very very very very very very very very very very very very very very long string</td>
  </tr>
</table>
<table class="nowrap">
  <tr>
    <td>Name</td>
    <td>Text</td>
  </tr>
  <tr>
    <td>[css] white-space:nowrap</td>
    <td>A very very very very very very very very very very very very very very very very very very long string</td>
  </tr>
</table>

CSS

table {
  border:solid #000 4px;
  margin:0.5rem;
  background-color:#eee;
}

td {
  border:dotted #666 1px;
}

.prefomatted td {
  white-space:pre;
}
.nowrap td {
  white-space:nowrap;
}