JSFiddle - React, Tailwind, and code Playground

HTML

<script src="http://dakardesign.com/Admin4Free/templates/js/jquery.min.js"></script>
<div id="content"></div>
<div id='subcontent'></div>
<form>
    <input type='button' name='button' id='button' value='add a div'>
        draggable-content =<div id="test"></div>
        content = <div id="testo"></div>
        draggable = <div id="testg"></div>
        plus = <div id="testmustplus"></div>
         ohigh<div id="testohight"></div>
</form>

CSS

#content {
    display: block;
    position:absolute;
    top:215px;
    width:600px;
    margin:auto;
    height:auto;
    border:1px solid red;
    padding:0px;
    min-height:300px;
    float:left;
}
#button {
    position:absolute;
    top:10px;
    left:25px;
}
}

JavaScript

var i = 1;
var p = 50;
$('input[type=button]').click(function () {
    /*p = p + 75;*/
    i++;
    var newdiv = document.createElement('div');
    newdiv.setAttribute('id', 'draggable' + i);
    newdiv.style.position = "absolute";
    newdiv.style.top = "290px";
    newdiv.style.left = "20px";
    newdiv.style.border = '1px solid #000';
    newdiv.style.display = 'inline-block';
    newdiv.style.width = '75px';
    newdiv.style.height = '75px';
    newdiv.style.float = 'left';
    newdiv.innerHTML = "draggable inner div";
    document.getElementById("subcontent").appendChild(newdiv);

    var g = $('#draggable' + i);
    var o = $('#content');
    
    g.draggable({
        constraint: "#content",
        drag: function (event, ui) {
                $('#testo').text(o.position().top);
                $('#testg').text(g.position().top);
                $('#test').text(g.position().top - o.position().top);
            
                if (g.position().top - o.position().top < 0) 
                {
                         var plushight = Math.abs(g.position().top - o.position().top);                   
                    $('#testmustplus').text(plushight);
                    o.css("top", g.position().top);
                    o.css("height", o.height() + plushight);
                    $('#testohight').text(o.height());
                     
                } 
        },

        scroll: false
    });

});