JSFiddle - React, Tailwind, and code Playground

HTML

<textarea class="comments" placeholder="Type many lines of texts in here and you will see magic stuff">sdfafsd
asdfasdf
ljksadf
asdfkljasdf
asdfljkasdf
asdfsadf</textarea>

<textarea class="comments" placeholder="Type many lines of texts in here and you will see magic stuff">asdf
asdf
asdf

asdf
as
df
asdf
a
sdf</textarea>

<textarea class="comments" placeholder="Type many lines of texts in here and you will see magic stuff">sdasdfa
sdf
asdf
asd
fa
sdf
as
df</textarea>

CSS

body {
     margin: 20px;
}

textarea {
    width: 500px;
    min-height: 50px;
    font-family: Arial, sans-serif;
    font-size: 13px;
    color: #444;
    padding: 5px;
}

.noscroll {
    overflow: hidden;
}

.hiddendiv {
    display: none;
    white-space: pre-wrap;
    width: 500px;
    min-height: 50px;
    font-family: Arial, sans-serif;
    font-size: 13px;
    overflow: hidden;
    padding: 5px;
    word-wrap: break-word;
}

JavaScript

var txt = $('.comments'),    
hiddenDiv = $(document.createElement('div')),
content = null;

txt.addClass('noscroll');
hiddenDiv.addClass('hiddendiv');

$('body').append(hiddenDiv);

txt.bind('keyup', function() {
    
    content = $(this).val();
    content = content.replace(/\n/g, '<br>');
    hiddenDiv.html(content);

    $(this).css('height', hiddenDiv.height());

});

txt.trigger('keyup');