JSFiddle - React, Tailwind, and code Playground

HTML

<textarea id="ta"></textarea>
<br />
<input type="button" value="test" onclick="calc()" />

CSS

* {
   font-size: 12px;
    font-family: verdana;
}

JavaScript

function calc() {
    var ta = document.getElementById('ta');
    var div = document.createElement('div');
    div.style.width = ta.scrollWidth + 'px';
    div.style.height = ta.scrollHeight + 'px';
    div.style.overflow = 'auto';
    div.style.position = 'absolute';
    div.style.top = '0px';
    div.style.left = '0px';
    div.style.border = '1px solid red';
    div.innerHTML = '<span>' + 
        ta.value.replace(/\n/g, '<br />') +
        '</span>';
    document.body.appendChild(div);
    var r= div.firstChild.getClientRects().length;
    document.body.removeChild(div);
    alert(r);
}