JSFiddle - React, Tailwind, and code Playground

HTML

<script src="//cdnjs.cloudflare.com/ajax/libs/jquery-layout/1.3.0-rc-30.79/jquery.layout.min.js"></script>
<link rel="stylesheet" href="http://layout.jquery-dev.net/lib/css/layout-default-latest.css">
<div id="mainLayout">
<div id="rightPanel">
    <div id="graph"></div>
    <div id="details"></div>
</div>
<div id="filter">
</div>
</div>

CSS

#mainLayout{
    left: 0;
    top: 0;
    bottom: 0;
    right: 0;
    position: absolute;
}

.ui-layout-pane {
    border: 0;
    /* cosmetic */
    padding: 0;
    overflow: hidden;
}

.ui-layout-resizer-south {
  height: 6px !important;
}
.ui-layout-toggler-south {
  height: 6px !important;
}

.ui-layout-resizer-east {
  width: 6px !important;
}
.ui-layout-toggler-east {
  width: 6px !important;
}

JavaScript

// OUTER-LAYOUT
  $('#mainLayout').layout({
    center__paneSelector: "#rightPanel",
    west__paneSelector:   "#filter",
      west__size: 250,
    // MIDDLE-LAYOUT (child of outer-center-pane)
    center__childOptions: {
      center__paneSelector: "#graph",
      south__paneSelector:  "#details",
      south__size:      250
    }
  });