JSFiddle - React, Tailwind, and code Playground

HTML

<script src="https://jp.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>
<script src="https://cdn-na.infragistics.com/igniteui/latest/js/i18n/infragistics-ja.js"></script>

<div id="layout" style="width:100%; height: 300px; display:block;">
		<div class="left"> 
			<h3>左領域</h3>
			<p>1</p>
			<p>2</p>
			<p>3</p>
			<p>4</p>
			<p>5</p>
			<p>6</p>
		</div>
		<div class="right">
			<h3>右領域</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">ヘッダー テキスト</div>
		<div class="footer">フッター テキスト</div>
		<div class="center">
			<h3>中央領域</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...

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