JSFiddle - React, Tailwind, and code Playground

HTML

<script src="https://igniteui.com/js/modernizr.min.js"></script>
<script src="https://code.jquery.com/jquery-1.9.1.min.js"></script>
<script src="https://code.jquery.com/ui/1.10.3/jquery-ui.min.js"></script>
<script src="https://cdn-na.infragistics.com/igniteui/latest/js/infragistics.core.js"></script>
<script src="https://cdn-na.infragistics.com/igniteui/latest/js/infragistics.lob.js"></script>
<link href="https://cdn-na.infragistics.com/igniteui/latest/css/themes/infragistics/infragistics.theme.css" rel="stylesheet"></link>
<link href="https://cdn-na.infragistics.com/igniteui/latest/css/structure/modules/infragistics.ui.layout.css" rel="stylesheet"></link>
<link href="https://cdn-na.infragistics.com/igniteui/latest/css/structure/infragistics.css" rel="stylesheet"></link>

<div id="layout" style="width:100%; height: 300px; display:block;">
		<div class="left"> 
			<h3>LEFT AREA</h3>
			<p>1</p>
			<p>2</p>
			<p>3</p>
			<p>4</p>
			<p>5</p>
			<p>6</p>
		</div>
		<div class="right">
			<h3>RIGHT AREA</h3>
			<p>
			Aliquam ut tellus tristique massa gravida accumsan. Vivamus sodales, purus eget vehicula aliquam, arcu ipsum hendrerit mauris, ac faucibus massa turpis eget nibh. Etiam blandit sodales semper. Curabitur enim nunc, molestie ac aliquam eu, imperdiet tincidunt orci. Proin pulvinar vehicula lacus, ut lacinia tortor molestie vitae. Nunc ut augue id erat feugiat feugiat non sit amet erat. Suspendisse ultrices risus dapibus erat laoreet accumsan. Phasellus rutrum, lectus quis tempus blandit, libero lectus dignissim ligula, in semper orci nibh ut diam.
			</p>
		</div>
		<div class="header">HEADER - some text here</div>
		<div class="footer">FOOTER - some text here </div>
		<div class="center">
			<h3>CENTER AREA</h3>
			<p>
			Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nunc eget porta urna. Ut gravida mi at ligula commodo feugiat vehicula lacus tincidunt. Proin lobortis magna sed lacus malesuada commodo fermentum felis auctor. Sed quis nulla...

CSS

body {
      background-color: #fff;
      font-family: 'segoe ui', 'arial', 'helvetica', 'sans-serif';
      /*overflow-x:hidden;*/
    }

    div#layout h2 {margin: 0;}

    div#layout .left, div#layout .right, div#layout .center, div#layout .footer, div#layout .header {
      color: #fff;
    }

    div#layout .left p, div#layout .right p, div#layout .center p, div#layout h3 {
      margin: 15px;
    }

    div#layout .center {
      background-color: #EEE;
      color: #555;
    }

   div#layout .right {
      background-color:#555;
      color: #EEE;
   }

   div#layout .left {background-color: #FFA72D;}

   div#layout .header {background-color: #2CBDF9;}

   div#layout .footer {background-color: #2CBDF9;}

    #sampleContainer {
        height: 370px;
    }

JavaScript

$(function () {
$(document).ready(function () {
                $('#layout').igLayoutManager({
                    layoutMode: "border",
                    borderLayout: {
                        leftWidth: "10%",
                        rightWidth: "20%"
                    }
                });
            });
});