JSFiddle - React, Tailwind, and code Playground

HTML

<!-- <div id="someparent"> -->
<div>
some other contentr
</div>
    <div id="getheight"></div>
<!-- </div> -->

<input type="button" value="To Maximum Height" style="position:absolute;top:20px;right:20px;" id="button" />

CSS

html, body{
    height:100%;
    width:100%;
    margin:0px;
    padding:0px;
}
#getheight{
    background:blue;
    border:1px solid navy;
    height:100px;
    padding:10px;
    width:200px;
    margin:20px;
}
#someparent{
    margin:20px;
    padding:10px;
    border:1px solid red;
    height:400px;
    width:400px;
}

JavaScript

$('#button').click(function(){
    var el = $('#getheight');
    var parent = el.parent();
    
    bottomPoint = parseFloat(el.css('height')) || 0;
    bottomPoint += parseFloat(el.css('margin-top')) || 0;
    bottomPoint += parseFloat(el.css('padding-top')) || 0;
    bottomPoint += parseFloat(el.css('padding-bottom')) || 0;
    bottomPoint += parseFloat(el.css('border-top-width')) || 0;
    bottomPoint += parseFloat(el.css('border-bottom-width')) || 0;
    
    
    
    pbottomPoint = parseFloat(parent.css('height')) || 0;
    pbottomPoint += parseFloat(parent.css('margin-top'))|| 0;
    pbottomPoint -= parseFloat(parent.css('padding-top')) || 0;
    pbottomPoint -= parseFloat(parent.css('padding-bottom')) || 0;
    pbottomPoint -= parseFloat(parent.css('border-top-width')) || 0;
    pbottomPoint -= parseFloat(parent.css('border-bottom-width')) || 0;
    
    
    
    var maxHeight = pbottomPoint - bottomPoint;
    
    maxHeight = (maxHeight + parseFloat(el.css('height')) - 
                 parseFloat(el.css('margin-bottom') || 0));
    
    el.css('height', maxHeight);
});