JSFiddle - React, Tailwind, and code Playground

HTML

<script src="http://layout.jquery-dev.net/lib/js/jquery.layout-latest.js"></script>
<div class="ui-layout-center">
    <div id="dialog1">dialog 1</div>
    <div id="dialog2">dialog 2</div>
</div>
<div class="ui-layout-north">North</div>
<div class="ui-layout-south">South</div>
<div class="ui-layout-west">West</div>

JavaScript

$('body').layout(
{ 
    applyDemoStyles: true,
    livePaneResizing : true
});

var dialog1 = $("#dialog1")
  .dialog({})
  .parent().appendTo( $(".ui-layout-center") );

dialog1.draggable( "option", "containment", $(".ui-layout-center") );

$("#dialog2")
  .dialog({})
  .parent().appendTo( $(".ui-layout-center") );

$("#dialog2").dialog("widget").draggable({containment : [ 0, 0, 10000, 10000 ], scroll: true, scrollSensitivity : 100});