JSFiddle - React, Tailwind, and code Playground

HTML

<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;
}
#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) {
			setHeight();
		},
		scroll : false
	});
	setHeight();
});
var container = $("#content");
function setHeight() {
	var maxHeight = 0;
	$("div", container).each(function(i, v) {
		maxHeight = Math.max($(v).position().top + $(v).height(), maxHeight);
	});
	if (container.height() != maxHeight) {
		container.height(maxHeight);
	}
}