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>

CSS

// disable scrolling in the other panes
.ui-layout-pane-north ,
.ui-layout-pane-west,
.ui-layout-pane-south {
    overflow: hidden !important;
}

.ui-layout-layout-center {
    overflow: auto
}

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") );