JSFiddle - React, Tailwind, and code Playground

HTML

<script src="http://dakardesign.com/Admin4Free/templates/js/jquery.min.js"></script>
<div id="content"></div>
<form>
    <input type='button' name='button' id='button' value='add a div'>
</form>

CSS

#content {
    display: block;
    position:relative;
    top:100px;
    width:300px;
    margin:auto;
    height:auto;
    border:1px solid red;
    padding:0px;
    min-height:300px;
}
#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 = +p + "px";
    newdiv.style.left = "20px";
    newdiv.style.border = '1px solid #000';
    newdiv.style.display = 'inline-block';
    newdiv.style.width = '75px';
    newdiv.style.height = '75px';
    newdiv.innerHTML = "draggable inner div";
    document.getElementById("content").appendChild(newdiv);

    var g = $('#draggable' + i);
    var o = $('#content');
    g.draggable({
        constraint: "#content",
        drag: function (event, ui) {
            if (g.position().top > o.height() - g.height()) {
                o.height(o.height() + 5);
                return true;
            }           
        },

        scroll: false
    });
    $("#content").height(o.height()+g.height());
});