JSFiddle - React, Tailwind, and code Playground

HTML

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

CSS

textarea { width: 100%; border:none; outline: none; height: 1em; }

JavaScript

document.onkeyup = function(evt) {
    var event = evt || window.event;
    var target = event.target;
    var nextArea = target.nextSibling; // assumes no whitespace between textareas.
    var chars;
    if (target.tagName == 'TEXTAREA' && (target.scrollLeft || target.scrollTop)) {
        chars = 0;
        while (target.scrollLeft || target.scrollTop) {
            target.value = target.value.replace(/.$/, function(m0) {
                nextArea.value = m0 + nextArea.value;
                return '';
            })
            ++chars;            
            target.selectionStart = target.value.length;
        }
        nextArea.focus();
        nextArea.selectionStart = chars;
    }

}