JSFiddle - React, Tailwind, and code Playground

HTML

<div class="container">
    <div class="itemA">A</div>
    <div class="itemB">B</div>
    <div class="itemC">C</div>
    <div class="itemD">D</div>
<div>

CSS

.container{
    position:relative;
    width:200px;
    min-height:200px;
    background-color:black
}
.itemA{
    position:absolute;
    top:260px;
    background-color:red;
    width:30px;
    height:30px;
}
.itemB{
    position:absolute;
    top:50px;
    right:90px;
    background-color:green;
    width:30px;
    height:30px;
}
.itemC{
    position:absolute;
    top:220px;
    right:50px;
    background-color:blue;
    width:30px;
    height:30px;
}


.itemD{
    position:absolute;
    top:220px;
    left:200px;
    background-color:yellow;
    width:30px;
    height:30px;
}

JavaScript

var max_top = 0, max_left = 0, elem_height = 0, elem_width = 0;


$('.container > div').each(function(){
    if(max_top < $(this).offset().top){
        max_top = $(this).offset().top;
        elem_height = $(this).height();
    }
    
    if(max_left < $(this).offset().left){
        max_left = $(this).offset().left;
        elem_width = $(this).width();
    }
});

$('.container').css('height',max_top + elem_height).css('width',max_left + elem_width);