JSFiddle - React, Tailwind, and code Playground

HTML

<script src="http://cdnjs.cloudflare.com/ajax/libs/jquery-easing/1.3/jquery.easing.min.js"></script>
<div id="wrapper">
    <select name="product_extra_options[group_1]">
        <option value="">Select Height</option>
        <option value="6432c6337f029634faaecd915402f6cd">Counter Height</option>
        <option value="526b0c93f913b9c2300b159c1fbc071b">Bar Height</option>
        <option value="b4498f99e16577cc6dc16772098faf56">Spectator Height +$35.00</option>
    </select>
    <div id="showme" style="display:">
        <input type="text">
        <input type="text" class="middle">
        <input type="text">
    </div>
</div>

CSS

#wrapper {
    margin: 0 auto;
    padding-top: 100px;
    width: 600px;
}
#showme {
    position: relative;
    border: 1px solid #cc0000;
}

JavaScript

$("div").ready(function () {

    $(this).css({
        borderStyle: "inset",
        cursor: "wait"
    });

    //$('#showme').fadeIn("easeInBounce");
    $('#showme').animate({
        top: '-=100px'
    }, 500, 'easeOutBounce', function () { // Animation complete.
        $(this)
            .css("border", "2px red inset")
            .filter(".middle")
            .focus();
        $("div").css("visibility", "hidden");
    });

});