JSFiddle - React, Tailwind, and code Playground

HTML

Textarea
<textarea id="dd" rows="5" cols="60"></textarea>

JavaScript

(function($) {
$.fn.textareaExpander = function( minHeight, maxHeight ){

    //initialize
    this.each( function(){

    if( this.nodeName.toLowerCase()!='textarea' )
        return;

    var $this = $(this);
    //set height restrictions
    if( $this.data('textexp-initialized')!==true )
    {
        minHeight = minHeight || 32;
        maxHeight = maxHeight || 300;
            
        $this.data('textexp-initialized', true );
        $this.data('textexp-min', minHeight || this.clientHeight );
        $this.data('textexp-max', maxHeight || this.clientHeight+300 );
        this.style.height = minHeight || this.clientHeight;
                
        this.style.overflow    = 'hidden';
        $(this).bind('keyup', resize).bind('input',resize).bind('focus',resize);
    }
    });
    
    
    function resize(e)
    {
        e = e.target || e;
        var $e = $(e);
    
        var h = Math.min( e.scrollHeight, $e.data('textexp-max') );
        h = Math.max( h, $e.data('textexp-min') );

        //if( $e.data('h')!=e.style.height )
        if( $e.data('h')!=h )
        {
            e.style.height = ""; // Reset the height
            e.style.height         =  h + "px";
            //e.style.overflow    = (e.scrollHeight > h ? "auto" : "hidden");

            $e.data('h',h);
         }
        return true;
     }
}
})(jQuery);


$(document).ready( function(){            
    $('#dd').textareaExpander();
});