JSFiddle - React, Tailwind, and code Playground

HTML

<link rel="stylesheet" href="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8.16/themes/ui-lightness/jquery-ui.css">
<div id="menuContainer">
    <div id="ddMenu">
        This is menu content<br/>
        <form>
            Text: <input type="text" />
        </form>
    </div>
    <div id="grippie" class="ui-resizable-handle ui-resizable-s">
        &#8226;&#8226;&#8226;
    </div>
</div>

This is normal content
<br/>
<br/>
More content
<div>
    ...content
</div>

CSS

#menuContainer{
     position:relative;
     background-color:#A3155C;
     overflow:hidden;
     padding:5px;
     padding-bottom:12px;
}
#ddMenu{
     width:100%;
}
#grippie{
     height:16px;
     display:inline-block;
     position:absolute;
     left:50%;
     bottom:0px;
     color:#FFF;
     -webkit-user-select: none;
    -khtml-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
    -o-user-select: none;
    user-select: none;
    width:40px;
    font-size:12px;
}

JavaScript

var openHeight = $("#menuContainer").outerHeight();
var openIHeight = $("#menuContainer").height();
$("#menuContainer").css('height','0px');
var closeHeight = $("#menuContainer").outerHeight();
var tippingPoint = openIHeight/2;
$("#ddMenu").css('visibility','hidden');

$("#menuContainer").resizable(
    { 
        handles: {
            "s":"#grippie"   
        },
        maxHeight: openIHeight,
        minHeight:0,
        start: function(){
               $("#ddMenu").css('visibility','visible');
        },
        stop: endDrag
    }
);

function endDrag(){
    if ($("#menuContainer").height() > tippingPoint){
        $("#menuContainer").animate({ height:openIHeight }, 500);
    }
    else{
        $("#menuContainer").animate({ height:0 }, 500, function(){
            $("#ddMenu").css('visibility','hidden'); 
        });
    }
}