JSFiddle - React, Tailwind, and code Playground
HTML
<div id="dlgTest1" style="display: none">
<p>
Lorem ipsum test popup dialog<br />
<br />
Click the OK button to resume activity.
</p>
</div>
JavaScript
$(document).ready(function () {
var myTitle =
"<div style='float: left'>LEFT TEXT</div><div style='float: right; margin-right: 10px;'>RIGHT TEXT</div>";
$("#dlgTest1").dialog({
title: '', // new jquery-ui-1.10.2 doesn't allow HTML here
autoOpen: false,
minWidth: 500, width: 500,
minHeight: 200, height: 200,
resizable: true,
modal: true,
show: "blind",
hide: "explode",
buttons: {
"OK": function () {
$(this).dialog("close");
}
}
}).siblings('.ui-dialog-titlebar').append(myTitle); // title goes here
$("#dlgTest1").dialog("open").dialog("moveToTop");
});