JSFiddle - React, Tailwind, and code Playground

HTML

<link rel="stylesheet" href="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8.9/themes/start/jquery-ui.css">
<div id="parentElement">
    <div id="dragElement" class="dragClass">
        <p>Drag me around!</p>
    </div>
</div>

CSS

#parentElement {
    width: 500px;
    height: 200px;
    margin: 20px auto;
    background: lightgray;
    position: relative;
}
#dragElement {
    font-family: Tahoma, sans;
    color: black;
    background: orange;
    width: 100px;
    height: 100px;
}
p {
    margin: 0; padding: 0;
}
.ui-resizable-helper {
    border: 2px dotted #00F;
}

JavaScript

$("#dragElement")
    .draggable({
        cursor      : "move",
        scroll      : false,
        containment : "parent",
        drag : function(event, ui) {
            expandParent("#parentElement", "#dragElement");
        }
    })
    .resizable({
        containment : "parent",
        resize : function(event, ui) {
            expandParent("#parentElement", "#dragElement");
        }
    });

function expandParent(parentName, childName) {
    var dragEl = $(childName);
    var dragElTop = parseInt(dragEl.css("top"), 10);
    var dragElHeight = parseInt(dragEl.css("height"), 10);
    var dragElBottom = dragElTop + dragElHeight;
    var parentEl = $(parentName);
    var parentElBottom = parseInt(parentEl.css("height"));
    if(parentElBottom <= dragElBottom + 20) {
        parentEl.css("height", "+=2");
    }
}