JSFiddle - React, Tailwind, and code Playground
HTML
<div id="outer">
<div id="box1"></div>
<div id="box2"></div>
</div>
CSS
#outer, #box1, #box2 {
position: absolute;
}
#outer {
left: 50px;
top: 50px;
width: 200px;
background: #aaa;
}
#box1, #box2 {
width: 20px;
height: 20px;
background: #f00;
}
#box1 {
left: 10px;
top: 40px;
}
#box2 {
left: 50px;
top: 20px;
}
JavaScript
var element=$("#outer"); // element is a jQuery object
var max=0;
element.children().each(function(index, child) {
child=$(child);
var childPos=child.position();
var childMax=childPos.top+child.outerHeight();
if(childMax>max) {
max=childMax;
}
});
element.css({height: max+'px'});