JSFiddle - React, Tailwind, and code Playground

by digitalextremist

HTML

<table>
    <tr>
        <td>
            <textarea class="expand" rows="1" cols="10"></textarea>
        </td>
    </tr>
    <tr>
        <td>Here is some text just below. Does it move?</td>
    </tr>
</table>

CSS

.expand {
    height: 1em;
    line-height: 1em;
    width: 300px;
    padding: 3px;
}
.expanding {
    position: absolute;
    z-index: 9;
}
textarea {
    resize: none;
}

JavaScript

$(window).load(function () {
    $('textarea.expand').focus(function () {
        $(this).addClass("expanding")
        $(this).animate({
            height: "10em"
        }, 500);
    });
    $('textarea.expand').blur(function () {
        $(this).animate({
            height: "1em"
        }, 500);
        $(this).removeClass("expanding")
    });
});