JSFiddle - React, Tailwind, and code Playground

HTML

<body>
<textarea rows="1" style="height:1em;" id="text"></textarea>
</body>

JavaScript

var observe;
if (window.attachEvent) {
observe = function (element, event, handler) {
    element.attachEvent('on'+event, handler);
};
}
else {
observe = function (element, event, handler) {
    element.addEventListener(event, handler, false);
};
}
function init () {
    var text = document.getElementById('text');
    
    function resize () {
        
        var height = text.scrollHeight <= 300 ? text.scrollHeight : 300;
        text.style.height = height+'px';
        
    }
   
    /* 0-timeout to get the already changed text */
    function delayedResize () {
        window.setTimeout(resize, 0);
    }
    observe(text, 'change',  resize);
    observe(text, 'cut',     delayedResize);
    observe(text, 'paste',   delayedResize);
    observe(text, 'drop',    delayedResize);
    observe(text, 'keydown', delayedResize);
   
    text.focus();
    text.select();
    resize();
}

init()