JSFiddle - React, Tailwind, and code Playground

by Sedbol

HTML

<div style="width: 300px">
<div class="text" style="position: absolute;width: 300px;word-break: break-word;"></div>
<div style="background: aqua">
    <textarea class="inputText"  style="background: none;width: 100%;resize: none"></textarea>
</div>
</div>

CSS

.inputText ,.text{
            font-size: 14px;
            font-family: Arial;
        }

JavaScript

var autoExpand = function (field) {
        field.style.height = 'inherit';
        var computed = window.getComputedStyle(field);
        var height = parseInt(computed.getPropertyValue('border-top-width'), 10)
            + parseInt(computed.getPropertyValue('padding-top'), 10)
            + field.scrollHeight
            + parseInt(computed.getPropertyValue('padding-bottom'), 10)
            + parseInt(computed.getPropertyValue('border-bottom-width'), 10);
        field.style.height = height + 'px';

    };

    document.addEventListener('input', function (event) {
        if (event.target.tagName.toLowerCase() !== 'textarea') return;
        autoExpand(event.target);
        document.getElementsByClassName('text')[0].innerText=document.getElementsByClassName('inputText')[0].value
    }, false);