JSFiddle - React, Tailwind, and code Playground

HTML

<p><textarea id="ta" style="padding:20px; width:40px; height:40px; border:1px solid black;">This is a long string of text</textarea></p>
<p>Textarea has scrollWidth <span id="ta_sw"></span>px, clientWidth <span id="ta_cw"></span>px, scrollHeight <span id="ta_sh"></span>px, and clientHeight <span id="ta_ch"></span>px.</p>
<p><input id="i" style="padding:20px; width:40px; height:40px; border:1px solid black;" value="This is a long string of text"></p>
<p>Input has scrollWidth <span id="i_sw"></span>px, clientWidth <span id="i_cw"></span>px, scrollHeight <span id="i_sh"></span>px, and clientHeight <span id="i_ch"></span>px.</p>

JavaScript

function fillDims(id) {
    var elem = document.getElementById(id);
    document.getElementById(id + "_sw").innerHTML = elem.scrollWidth;
    document.getElementById(id + "_cw").innerHTML = elem.clientWidth;
    document.getElementById(id + "_sh").innerHTML = elem.scrollHeight;
    document.getElementById(id + "_ch").innerHTML = elem.clientHeight;
}
fillDims("ta");
fillDims("i");