JSFiddle - React, Tailwind, and code Playground

HTML

<div class="container">

    <p></p>
    <textarea>Stuff Stuff Stuff Stuff Stuff Stuff Stuff Stuff Stuff Stuff Stuff Stuff Stuff Stuff Stuff Stuff Stuff Stuff Stuff Stuff Stuff Stuff Stuff Stuff Stuff Stuff Stuff Stuff Stuff Stuff Stuff Stuff Stuff Stuff Stuff Stuff Stuff Stuff Stuff Stuff Stuff Stuff Stuff Stuff Stuff Stuff Stuff Stuff Stuff Stuff Stuff Stuff Stuff Stuff Stuff Stuff Stuff Stuff Stuff Stuff Stuff Stuff Stuff Stuff Stuff Stuff Stuff Stuff Stuff Stuff Stuff Stuff Stuff Stuff Stuff Stuff Stuff Stuff Stuff Stuff Stuff Stuff Stuff Stuff Stuff Stuff Stuff</textarea>
    
    <input type="button" value="Toggle height">
    
</div>

CSS

*, *:before, *:after {
    -moz-box-sizing: border-box; 
    -webkit-box-sizing: border-box; 
    box-sizing: border-box;
 }

html, body{
    padding:0;
    margin:0;
}

.container {
    width:300px;
    border: 1px solid #000;
    margin: 100px auto;
}

textarea{
    font-family: arial;
    font-size: 10px;
    width: 300px;
    height: 100px;
    overflow: hidden;
    padding: 10px;
    margin: 10px;
    border:10px solid #cc0000;
}

JavaScript

var el = document.querySelector('textarea'),
    p = document.querySelector('p');

setInterval(function(){
    
    p.innerHTML = 'Current height: ' + window.getComputedStyle(el).height;
    
}, 1000);

var state = false;
document.querySelector('input').addEventListener('click', function(){
    state? el.style.height = '100px' : el.style.height = '50px';
    state = !state;    
}, false);