JSFiddle - React, Tailwind, and code Playground

HTML

<textarea class="expand" rows="1" cols="10"></textarea>

CSS

.expand {
    height: 1em;
    width: 50%;
    padding: 3px;
}

JavaScript

$('textarea.expand').focus(function () {
    $(this).animate({ height: "4em" }, 500); 
});
$('textarea.expand').focusout(function () {
    $(this).animate({ height: "1em" }, 500); 
});