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://jp.igniteui.com/js/angular.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>
<script src="https://cdn-na.infragistics.com/igniteui/latest/js/extensions/igniteui-angularjs.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/infragistics.css" rel="stylesheet"></link>
<script src="https://cdn-na.infragistics.com/igniteui/latest/js/i18n/infragistics-ja.js"></script>

<div ng-app="sampleApp">
        <ig-layout-manager layout-mode="border" id="layout" style="width:100%; height: 300px; display:block;">
            <border-layout>
                <border-layout left-width="10%" right-width="20%"></border-layout>
            </border-layout>
            <content>
                <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...

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 () {
var sampleApp = angular.module('sampleApp', ['igniteui-directives']);
});