JSFiddle - React, Tailwind, and code Playground

by Town

HTML

<div style="height:20px;">first:<br/>
   <textarea id="txt1" rows="1" cols="20"
     style="position: relative; background-color: gray; width: 400px; height: 12px; font-size: 10px;">
   </textarea>
</div>
<br/>
second:
<br/>
<input type="text" id="txt2"/>

JavaScript

$(document).ready(function () {
    $('#txt1').focus(function () {
        $(this).height(90); //.css('z-index', 1);
        $('#txt2').val('focus');
    });
    $('#txt1').blur(function () {
        $(this).css('height', 'auto');
        $('#txt2').val('blur');
    });
});