JSFiddle - React, Tailwind, and code Playground

HTML

lines: <div id="lines"></div>
<br />
<div id="test"></div>
<br />
<textarea id="change" rows="10" cols="40">
fjkdsjfkljdskfjkdsjfkldsjfkdsjkfljdsfkjdskfjdsklfjdsklfjdksjfkdsf
fjdsklfjkdsjfkdsjfkljdsfkjdsklfjsdklfjksdjfsdkflkjsdkfjdsklfjksdjfksddsjakdjsajdkjaskldjksajdkasjdklasjdkljaskdjklasjdkjaskldjkasldjklasjdkasjdklasjdklasjdklasjdklasjdklasjdklasjdklaksjdklasjldlaksjdkasljdklajsdlkkasd
</textarea>

CSS

#test {
    border: 1px solid #000;   
}

#test,
#change{
  display: none;
}

JavaScript

$.fn.numLines = function() {
    var tmp = $('<div style="visibility:hidden;">x</div>').appendTo(document.body);
    var lines = this.height() / tmp.height();
    tmp.remove();
    return lines;
};

$('#change').keyup(function() {
    $('#test').html(this.value.replace(/\n/g, '<br />'));
    $('#lines').text($('#test').numLines());
}).keyup();