JSFiddle - React, Tailwind, and code Playground

HTML

<link rel="stylesheet" href="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8.16/themes/base/jquery-ui.css">
<button type="button" id="button">open dialog</button>
<div id="dialog" class="ui-widget">
    Test asd asd  asdasdasd asd asdasd <br />
    Test sdjjbsad as dasdasd asd asdasd asdasd asdas dasdasdasd <br />
    Test asdasd asdas  sadasdasd sada sdasd  asdas sadasda sadas<br />
    Test dasd asd sa d  dsadasdas sadad saasda ddfsdg sdgf asdf 
    Test fsdfsdsdf dsf df f dfsdfdf dfdsfsdfdfs dsf df fdsdfsdf<br />
    Test sdfdffsd<br />
    Test asdasdasd asd asasd dsadasdasd sad asd 
</div>

CSS

#dialog {
    display: none;
}

JavaScript

var iMaxWidth = 300;

$('#dialog').width(iMaxWidth);
var iHeight = $('#dialog').height() + 16;

$('#button').click(function() {
    $("#dialog").dialog({
        autoOpen: true,
        height: 100,
        width: 100,
        modal: false,
        draggable: false,
        resizable: false,
    });
    var iCurrentHeight = $("#dialog").height();
    var iCurrentWidth = $("#dialog").width();
    if (iCurrentHeight < iHeight || iCurrentWidth < iMaxWidth) {
        var oOffset = $("#dialog").parent().offset();
        $("#dialog").parent()
            .width(iMaxWidth + 50)
            .animate({ 
                top: oOffset.top - ((iHeight - iCurrentHeight) / 2),
                left: oOffset.left - ((iMaxWidth - iCurrentWidth) / 2)
            });
        $("#dialog").animate({ height: iHeight, width: iMaxWidth}, 500);
    }
});