JSFiddle - React, Tailwind, and code Playground

HTML

<body>
  <textarea id="inp"></textarea>
  <span id="hiddenSpan" class="hidden"></span>
</body>

CSS

textarea {
  width: 300px;
  height: 300px;
  text-align: left;
  font-family: "Times New Roman", Times, serif;
}


/* display:none; */

.hidden {
  /* display:none; */
  max-width: 300px;
  display: inline-block;
  word-wrap: break-word;
  vertical-align: top;
  font-family: "Times New Roman", Times, serif;
}

JavaScript

$(document).ready(function() {
  var textAreaHeight = $('#inp').height();
  var fontSize = 200;
  var font = fontSize + "px";

  $('#inp').css("font-size", font);
  $('.hidden').css("font-size", font);

  $('#inp').keyup(function() {
    var txt = $(this).val();
    $('#hiddenSpan').html(txt);
    
    fontSize = decreaseFontSize(fontSize);
    font = fontSize + 'px';
    
    $('#inp').css("font-size", fontSize + 'px');
  })

  function decreaseFontSize(tempFontSize) {
  	var textHeight = $('#hiddenSpan').height();
    if (textHeight > textAreaHeight) {
    	var factor = .99;
      tempFontSize *= factor;
      $('#hiddenSpan').css("font-size", tempFontSize + 'px');
      
      return decreaseFontSize(tempFontSize);
    } else {
      return tempFontSize;
    }
  }
})