JSFiddle - React, Tailwind, and code Playground

by Amin Kodaganur

HTML

<div id="sendmsg">
    <textarea id="sendtext" value="">
    </textarea>
    <div class="clearBoth"></div>
</div>

CSS

#sendmsg{width:100%; height:auto;border:solid;}
#sendtext{width:95%; margin:10px; padding:5px; transition: width 0.25s; resize:none; overflow:hidden;}
.clearBoth{clear:both;}

JavaScript

$('#sendtext').on('input', function(){
        $this = $(this);
        var totalHeight = $this.prop('scrollHeight') - parseInt($this.css('padding-top')) - parseInt($this.css('padding-bottom'));
        $this.height(totalHeight);
        $div = $('#sendmsg');
        $div.height($div.prop('scrollHeight') - parseInt($div.css('padding-top')) - parseInt($div.css('padding-bottom')))
    });