JSFiddle - React, Tailwind, and code Playground

HTML

<!DOCTYPE html>


<body>
The content of the body element is displayed in your browser.
<br><br>
<textarea id="TextArea">long text long text long text long text long text long text long text long text longtext long text long text long text long text long text long text long text long text long text long text long text long text long text long text long text long text long text long text long text long text long text longtext long text long text long text long text long text long text long text long text long text long text long text long text long text
</textarea>
<br><br>
<button id="b1">1: Alert current scroll height</button>
<br><br>
<button id="b2">2: Change textarea width to 50</button>
<br><br>
<button id="b3">3: Change textarea width to 100</button>
<br><br><br><br><br><br>
<button id="b4">4: Change textarea height according to its scrollheight</button>
</body>

CSS

#TextArea{
  width: 50%;
}

JavaScript

$("#b1").click(function(){
 var textaraElement = document.getElementById("TextArea"); 
 alert(textaraElement.scrollHeight);
});

$("#b2").click(function(){
  $("#TextArea").css("width","50%");
});

$("#b3").click(function(){
$("#TextArea").css("width","100%");
});

$("#b4").click(function(){
 var textaraElement = document.getElementById("TextArea"); 
    textaraElement.style.height = textaraElement.scrollHeight+ "px";
 
});