JSFiddle - React, Tailwind, and code Playground

HTML

<script src="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8.11/jquery-ui.min.js"></script>
<link rel="stylesheet" href="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8.11/themes/base/jquery-ui.css">
<div class="northcontent">
    sfhsdgfsdhgf
    sdsjfkjdsfhskdj
    fsjdfhsdjhf
    sdfgsduyfgduys
    fhsgdhdgsfsdhfgjfs<br /><br />
    sfdsfhsdf<br /><br />
    dsfdshjsd<br /><br />
    <br /><br />
</div>
<div id="bottom_slide_panel">
<div class="bottom_content">
<iframe src="frames.html" width="100%" height="100%">
  <p>Your browser does not support iframes.</p>
</iframe></div>
</div>

CSS

#bottom_slide_panel
{
    width:100%;
    z-index:10;
.bottom_content
{
    position:relative;
    width:100%;
    overflow:hidden;
    font-size:12px;
}
#bottom_slide_panel .bottom_content
{
    border-top:2px solid #a7a7a7;
}
.northcontent{
height:50%;
}

JavaScript

$(document).ready(function() {

// init
 var bottompanel = $("#bottom_slide_panel");


$(".bottom_content", bottompanel).resizable({
            minHeight:10,
            maxHeight: 1000,
            handles: 'n'
        });


});