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 inputLength = 0;
    var font = fontSize + "px"
    
    $('#inp').css("font-size", font);
    $('.hidden').css("font-size", font);
        
    $('#inp').keyup(function() {
        var txt = $(this).val();
        $('#hiddenSpan').html(txt);
        
        var textHeight = $('#hiddenSpan').height();
        
        if( textHeight > textAreaHeight ) {
            var font = decreaseFontSize( textHeight) + "px";
            $(this).css("font-size", font);
            $('.hidden').css("font-size", font);
        }
    })

    function decreaseFontSize( textHeight) {
          fontSize = textAreaHeight/(textHeight/fontSize);
        	return fontSize;
    }
})