JSFiddle - React, Tailwind, and code Playground

HTML

<link rel="stylesheet" href="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8.5/themes/base/jquery-ui.css">
    <a href="#" onclick="showDialog()">Open</a>
    
    <div id="myDialog" style="display:none;">
        <p>Hello world</p>
        <div id="resizeToParent" style="overflow:scroll">
            <div style="background: #ffc; width: 30px; height: 100px;">
            </div>
        </div>
    </div>

CSS

#resizeToParent {
  border: 5px solid #aaa;   
}

JavaScript

showDialog = function() {

    $('#myDialog').dialog({
        title: 'resize me'
    });

    $('#myDialog').bind("dialogresize", function(event, ui) {
        $('#myDialog #resizeToParent').css('height',  ($('#myDialog').height() - 40) + 'px');

        $('#myDialog #resizeToParent div').text('inner: ' + $('#myDialog #resizeToParent').css('height') + ' outer: ' + $('#myDialog').css('height'));
    });
}