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;
    width: 300px;
}

JavaScript

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

$('#button').click(function() {
    $("#dialog").dialog({
        autoOpen: true,
        height: 100,
        width: 100,
        modal: false,
        draggable: false,
        resizable: false,
    });
    if ($("#dialog").height() < iHeight) {
        $("#dialog").parent().width(350);
        $("#dialog").animate({ height: iHeight, width: 300}, 500);
    }
});