JSFiddle - React, Tailwind, and code Playground

HTML

<link rel="stylesheet" href="http://ajax.aspnetcdn.com/ajax/jquery.ui/1.8.16/themes/ui-lightness/jquery-ui.css">
<div id="thedialog">Dialog Content</div>
<input type="button" value="click me!" />
<div id="messages"></div>

CSS

.ui-dialog
{
    padding: 20px;
}

JavaScript

var useOuterHeight = false;

$.extend($.ui.dialog.prototype, {
    _size: function() {
        /* If the user has resized the dialog, the .ui-dialog and .ui-dialog-content
         * divs will both have width and height set, so we need to reset them
         */
        var options = this.options,
            nonContentHeight,
            minContentHeight,
            isVisible = this.uiDialog.is( ":visible" );

        // reset content sizing
        this.element.show().css({
            width: "auto",
            minHeight: 0,
            height: 0
        });

        if ( options.minWidth > options.width ) {
            options.width = options.minWidth;
        }

        // reset wrapper sizing
        // determine the height of all the non-content elements
        if(useOuterHeight)
        { 
            nonContentHeight = this.uiDialog.css({
                height: "auto",
                width: options.width
            })
            .outerHeight();
        }
        else
        {
            nonContentHeight = this.uiDialog.css({
                height: "auto",
                width: options.width
            })
            .height();
        }

        minContentHeight = Math.max( 0, options.minHeight - nonContentHeight );
        
        if ( options.height === "auto" ) {
            // only needed for IE6 support
            if ( $.support.minHeight ) {
                this.element.css({
                    minHeight: minContentHeight,
                    height: "auto"
                });
            } else {
                this.uiDialog.show();
                var autoHeight = this.element.css( "height", "auto" ).height();
                if ( !isVisible ) {
                    this.uiDialog.hide();
                }
                this.element.height( Math.max( autoHeight, minContentHeight ) );
            }
        } else {
            this.element.height( Math.max( options.height - nonContentHeight, 0 ) );
        }

        if...