JSFiddle - React, Tailwind, and code Playground

HTML

<div id="parent">
    <div class="container">
        <div id="eleman"></div>
        <div id="eleman2"></div>
    </div>
</div>

CSS

#parent {min-height:200px; height:365px; width: 300px; border: 1px black dotted; left: 0; display: block;}
#eleman { height: 100px; position:absolute; left:20px; top:150px; width: 100px; background-color:orange; }
#eleman2 { height: 100px; position:absolute; left:170px; top:250px; width: 100px; background-color:orange; }
.container{
  border:1px solid red;
}

JavaScript

$(document).ready(function() {
    var
        $document = $(document),
        $parent = $("#parent"),
        $container = $(".container", $parent),
        offset = $container.offset(),
        scrollbarSafety = 15; 
    
    $container.height($document.height() - offset.top - scrollbarSafety);

    $("#eleman,#eleman2")
            .draggable(
            {
                containment: $container,
                drag:
                    function(event, ui)
                    {
                        var shouldHeight = getdraggablemaxheight();

                        if($parent.height() < shouldHeight)
                        {
                            $parent.height(shouldHeight);
                        }
    
                        if($parent.height() > shouldHeight)
                        {
                            $parent.height(shouldHeight);
                        }

                    }
            }
        );    
});

function getdraggablemaxheight() {
    var $parent = $("#parent"),
        $container = $(".container", $parent),
        maxheight = 0,
        currentheight = 0,
        currentposition;
    
    $container.children().each(function(index, element) {
        currentposition = $(element).position();
        currentheight = currentposition.top + $(element).height() + 15;
        if(currentheight > maxheight)
            maxheight = currentheight;
    });
    
    return maxheight;
    
}