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: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;
}

.draggable {
    float:left;
    clear: both;
    border: 1px solid #000;
    display: inline-block;
    width: 75px;
    left:20px;
    height: 75px;
}
}

JavaScript

var i = 1;
var p = 50;
$('input[type=button]').click(function () {
    p = p + 75;
    i++;
    var newdiv = document.createElement('div');
    newdiv.setAttribute('class','draggable');
    newdiv.setAttribute('id', 'draggable' + i);
    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
    });

});