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());
});