JSFiddle - React, Tailwind, and code Playground

HTML

<textarea class="auto-resize"></textarea>
<br>
<textarea class="auto-resize"></textarea>

CSS

body {
     margin: 20px;
}

textarea {
    color: #444;
    padding: 5px;
}

.auto-resize {
    resize: none; /* remove this if you want the user to be able to resize it in modern browsers */
    overflow: hidden;
    font-size: 12px;
}

.hiddendiv {
    display: none;
    white-space: pre-wrap;
    word-wrap: break-word;
    overflow-wrap: break-word; /* future version of deprecated 'word-wrap' */
}

/* the styles for 'commmon' are applied to both the textarea and the hidden clone */
/* these must be the same for both */
.common {
    min-height: 50px;
    font-family: Arial, sans-serif;
    font-size: 13px;
    overflow: hidden;
}

.lbr {
    line-height: 15px;
}

JavaScript

$(function(){
    if ($('.auto-resize').length > 0) {
        var hiddenDiv = $('<div class="hiddendiv common">'),
            content = null;
        
        $('body').append(hiddenDiv);
        
        $(document).on('keyup', '.auto-resize', function () {
        
            content = $(this).val();
        
            content = content.replace(/\n/g, '<br>');
            hiddenDiv.html(content + '<br class="lbr">');
        
            $(this).css('height', hiddenDiv.height())
        });
    }
});