JSFiddle - React, Tailwind, and code Playground

HTML

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

<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{
  display:none;
  white-space:pre;
}

JavaScript

$(function(){
  $('#hide').text($('#txt').val());
  $('#txt').width($('span').width());
}).on('input', function () {
  $('#hide').text($('#txt').val());
  $('#txt').width($('span').width());
});