JSFiddle - React, Tailwind, and code Playground
HTML
<script src="https://jqwidgets.com/public/jqwidgets/jqx-all.js"></script>
<link rel="stylesheet" href="https://jqwidgets.com/public/jqwidgets/styles/jqx.energyblue.css">
<link rel="stylesheet" href="https://jqwidgets.com/public/jqwidgets/styles/jqx.base.css">
<div id='jqxwindow'>
<div id="windowHeader">Header</div>
<div id="windowBody">
<div id="container">
<div id="leftblock">a</div>
<div id="contentblock">b</div>
<div id="rightblock">c</div>
</div>
</div>
</div>
CSS
#container {
width: 97%; /* to escape scrollbar */
display: table;
table-layout: fixed;
border: 5px solid #ccc;
}
#leftblock {
width: 50%;
display: table-cell;
padding: 10px;
}
#contentblock {
width: 20px;
display: table-cell;
padding: 10px;
border: 5px solid #ccc;
border-top: 0;
border-bottom: 0;
}
#rightblock {
width: 20%;
display: table-cell;
padding: 10px;
}
JavaScript
$('#jqxwindow').jqxWindow({
height: 800,
width: 340,
minHeight: 100,
minWidth: 200,
maxHeight: screen.height,
maxWidth: screen.width,
isModal: true,
autoOpen: true,
resizable: true
});