JSFiddle - React, Tailwind, and code Playground

HTML

<p>Lorem ipsum 
  <span id="hide"></span><br>
  <input id="txt" type="text" placeholder="type here ...">
  <br>egestas arcu.
</p>

CSS

body,
#txt,
#hide {
  font: inherit;
  margin: 0;
  padding: 0;
  font-family: Roboto;
}

#txt {
  border: none;
  color: #888;
  min-width: 10vw;
  max-width: 98vw;
}

#hide {
  position: absolute;
  height: 0;
  overflow: hidden;
  white-space: pre;
}

JavaScript

var hide = document.getElementById('hide');
var txt = document.getElementById('txt');
resize();
txt.addEventListener("input", resize);

function resize() {
  hide.textContent = txt.value;
  txt.style.width = hide.offsetWidth + 2 + "px";
}