JSFiddle - React, Tailwind, and code Playground

HTML

<textarea placeholder="Some text here." id="text"></textarea>
<br />
After typing 5 lines (height is 21*5) it uses a scroll bar. What I am trying to do is get it to expand its height by 21px when it reaches the bottom, and when a line is removed it shrinks by 21px unless it is at the minimum of 105px.

CSS

textarea {
    resize: none;
    width: 200px;
    height: 105px;
    line-height: 21px;
}

JavaScript

$('#text').focus(function () {
    // Do something here
});