JSFiddle - React, Tailwind, and code Playground

HTML

<div class="wrap">
  <table>
    <tr>
      <td>
        <input type="text" value="testing 123 testing 456 testing 789">
      </td>
      <td>
        <span>Column 2 testing 1234567890 testing 1234567890 testing 1234567890</span>
      </td>
      <td>
        <span>Column 3 testing 1234567890 testing 1234567890 testing 1234567890</span>
      </td>
    </tr>
  </table>
</div>

CSS

.wrap {
  width: 100%;
  overflow-x: scroll;
}
table {
  min-width: 100%;
  width: auto;
}
td {
  border: 1px solid #000;
  padding: 10px;
  white-space: nowrap;
}
input {
  width: 100%;
}