JSFiddle - React, Tailwind, and code Playground

by 1eddy87

HTML

<textarea placeholder="test" rows="1"></textarea>

CSS

textarea {
    box-sizing: border-box;
    margin: 0px;
    padding: 8px;
    border: 2px solid #CCC;
    outline: medium none;
    resize: none;
    font-size: 120%;
    min-height: 1em;
    max-height: 10em;
    width: 100%;
    overflow: hidden;
    overflow-x: hidden;
    display: inline-block;
}

JavaScript

onload = function () {
    var t = document.getElementsByTagName('textarea')[0];
    var offset = !window.opera ? (t.offsetHeight - t.clientHeight) : (t.offsetHeight + parseInt(window.getComputedStyle(t, null).getPropertyValue('border-top-width')));

    var resize = function (t) {
        t.style.height = 'auto';
        t.style.height = (t.scrollHeight + offset) + 'px';
    };

    t.addEventListener && t.addEventListener('input', function (event) {
        resize(t);
    });

    t['attachEvent'] && t.attachEvent('onkeyup', function () {
        resize(t);
    });
}