JSFiddle - React, Tailwind, and code Playground

HTML

<textarea id="comments" placeholder="Type many lines of texts in here and you will see magic stuff"></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(e) {
    
    content = txt.val();
    
    if(e.which == 13)
    {
        content += '\n';
    }
    
    content = content.replace(/\n/g, '<br>');
    hiddenDiv.html(content);

    txt.css('height', hiddenDiv.height());

});