JSFiddle - React, Tailwind, and code Playground

HTML

<div class="wrap">
  <table>
    <tr>
      <td>
        <input id="flex-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 {
  width: auto;
}
td {
  border: 1px solid #000;
  padding: 10px;
  white-space: nowrap;
}

JavaScript

function resizable (el, factor) {
  var int = Number(factor) || 7.7;
  function resize() {el.style.width = ((el.value.length+1) * int) + 'px'}
  var e = 'keyup,keypress,focus,blur,change'.split(',');
  for (var i in e) el.addEventListener(e[i],resize,false);
  resize();
}
resizable(document.getElementById('flex-input'),5.6);