JSFiddle - React, Tailwind, and code Playground

HTML

<div class="expandingArea">
    <pre><span>Here's some text.</span><br/></pre>
    <textarea>Here's some text.</textarea>
</div>

CSS

/* Expandable editor */
 textarea, pre {
    margin: 0;
    padding: 0;
    outline: 0;
    border: 0;
}
.expandingArea {
    display: block;
    position: relative;
    background: #f5f5f5;
    max-width: 300px;
}
.expandingArea > textarea, .expandingArea > pre {
    font: 400 1em 'Helvetica', 'Arial', sans-serif;
    letter-spacing: normal;
    background: transparent;
    white-space: pre-wrap;
    word-wrap: break-word;
}
.expandingArea > textarea {
    position: absolute;
    z-index: 100;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    resize: none;
    color: red;
    -webkit-box-sizing: border-box;
    -moz-box-sizing: border-box;
    -ms-box-sizing: border-box;
    box-sizing: border-box;
    overflow: hidden;
}
.expandingArea > pre {
    display: block;
    /* Provides extra padding to match mozilla textarea */
    -moz-box-sizing: border-box;
    -moz-padding-end: 1.5px;
    -moz-padding-start: 1.5px;
    color: blue;
}

JavaScript

function makeExpandingArea(container) {
    var area = container.querySelector('textarea');
    var span = container.querySelector('span');
    if (area.addEventListener) {
        area.addEventListener('input', function () {
            span.textContent = area.value;
        }, false);
        span.textContent = area.value;
    } else if (area.attachEvent) {
        // IE8 compatibility
        area.attachEvent('onpropertychange', function () {
            span.innerText = area.value;
        });
        span.innerText = area.value;
    }
}

var areas = document.querySelectorAll('.expandingArea');
var l = areas.length;
while (l--) {
    makeExpandingArea(areas[l]);
}