JSFiddle - React, Tailwind, and code Playground

HTML

<textarea id="t1" cols="50">
123456789012345678901234567890123456789012345678901234567890123456789012345678901234567890123456789012345678901234567890123456789012345678901234567890123456789012345678901234567890123456789012345678901234567890123456789012345678901234567890123456789012345678901234567890123456789012345678901234567890123456789012345678901234567890123456789012345678901234567890
</textarea>

<hr/>

<textarea id="t2" cols="50">123456789012345678901234567890123456789012345678901234567890</textarea>

CSS

textarea {
    resize: none;
    overflow-y: scroll;
}

JavaScript

var textareas = document.getElementsByTagName("textarea");

for(var i = 0; i < textareas.length; ++i){
    textareas[i].addEventListener("input", handleInput);
    textareas[i].cols += 3;
    handleInput(null, textareas[i]);
}

function handleInput(event, area){
   if(area === undefined) area = this;
   area.value = fixText( area.value, area.value.length, area.cols-3);
}

function fixText(text, length, limit){
    var counter = 0;
    for(var i = 0; i < length; ++i){
       var currChar = text[i];
       counter++;
        console.log(counter, limit);
        if(currChar === "\n"){
            counter = 0;
        } else if(counter > limit){
            console.log(text);
            text = text.substring(0,i) + "\n" + text.substring(i, text.length); 
            counter = 0;
        }        
    }
    return text;
}