JSFiddle - React, Tailwind, and code Playground

HTML

<div>
    <textarea id=t cols=50 rows=10>                                 </textarea>
    <span id=s>I like/dislike this site because</span>
</div>

CSS

textarea {
    position: absolute;
    left: 0px;
    top: 0px;
}

span {
    position: absolute;
    left: 2px;
    top: 1px;
}

span {
    backgroun-color:white;
    font: 10pt Courier New;
}

JavaScript

function $(id) {return document.getElementById(id);}
$('s').addEventListener('click', function() {
    $('t').setSelectionRange(33, 33)
    $('t').focus();
});
$('t').addEventListener('keyup', function() {
    if($('t').value.substring(0, 33) != ' '.times(33)) {
            $('t').value = ' '.times(Math.max(
                33, $('t').value.firstspace())
            )
            + $('t').value.fromnospaces();
            $('t').setSelectionRange(33,33);
    }
});

function t() {
    if(this.selectionStart < 33) this.setSelectionRange(33,33);
}

$('t').addEventListener('keyup', t);
$('t').addEventListener('click', t);

String.prototype.times = function(n) {
    var r = "";
    for(var i = 0; i < n; i++) r += this;
    return r;
}

String.prototype.firstspace = function() {
    for(var i = 0; i < this.length; i++)
        if(this[i] != ' ')
            return i;
    return -1;
}

String.prototype.fromnospaces = function() {
    return this.substring(this.firstspace());
}