JSFiddle - React, Tailwind, and code Playground

HTML

<textarea id="t1" cols="60">123456789012345678901234567890123456789012345678901234567890</textarea>

<hr/>

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

CSS

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

JavaScript

textareas = document.getElementsByTagName("textarea");
var isChrome = navigator.userAgent.indexOf("Chrome") != -1;
for(var i = 0; i < textareas.length; ++i){
    if(isChrome){
        textareas[i].style.width = textareas[i].offsetWidth + textareas[i].cols/3 + "px";
    }
}