JSFiddle - React, Tailwind, and code Playground

HTML

<script src="http://layout.jquery-dev.com/lib/js/jquery-ui-latest.js"></script>
<script src="http://layout.jquery-dev.com/lib/js/jquery.layout-1.3.0.rc30.80.js"></script>
<link rel="stylesheet" href="http://layout.jquery-dev.com/lib/css/layout-default-latest.css">
<div class="container body-content">
    <div class="ui-layout-west">
        <div>West</div>
    </div>
    <div class="ui-layout-center">
        <div>Center</div>
    </div>
</div>

CSS

html,body, .container{height:100%}

JavaScript

$(document).ready(function(){
    //This works when layout west and layout center divs are not inside of body-content div
    //var globalLayout = $('body').layout();
    
    //This never works
var globalLayout = $('div.body-content').layout();
});