JSFiddle - React, Tailwind, and code Playground

by chris lindquist

HTML

<div class="my-hidden-textarea">hover  here
    <textarea style="position:absolute;top:0px;left:0px;">foo bar</textarea>
  </div>

CSS

.my-hidden-textarea textarea{
    width:0px;
    height:0px;
    resize: none;
    -webkit-transition: width 0.3s, height 0.3s, left 0.3s;
    -moz-transition: width 0.3s, height 0.3s, left 0.3s;
    -o-transition: width 0.3s, height 0.3s, left 0.3s;
    transition: width 0.3s, height 0.3s, left 0.3s;
    -webkit-box-sizing: border-box;
    -moz-box-sizing: border-box;
    box-sizing: border-box;
    position:relative;
}
.my-hidden-textarea:hover textarea{
    resize: both;
    width:350px;
    height:100px;
}