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

function calc_bb(a, b){
    var p = $(a);
    var d = $(b);
    var dragWidth = parseInt(d.css('width'));
    var left = p[0].offsetLeft;
    var top = p[0].offsetTop;
    var width = parseInt(p.css("width"), 10)-dragWidth;
    return [left, top, width+left, 1000];
}

$("#dragElement").mouseover(function(){
    var dragEl = $("#dragElement");
    dragEl.resizable({containment: calc_bb("#parentElement", "#dragElement")});
    dragEl.draggable({containment: calc_bb("#parentElement", "#dragElement")});   
});

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

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