JSFiddle - React, Tailwind, and code Playground

HTML

<link rel="stylesheet" href="http://necolas.github.com/normalize.css/2.1.3/normalize.css">
<body>
    <div class="wrapper">
        <div class="left">
            <p>Some Text</p>
        </div>
        <div class="spacer">spcr</div>
        <div class="right">
            <input type="button" onclick="fillClear();" value="Fill / Clear the div !" />
            <div id="fillMe"></div>
        </div>
    </div>
</body>

CSS

body, html {
        height : 100%;
    background : #f3f3f3;
}

.wrapper {
      width : 600px;
    display : table;
     margin : 0 auto;
     height : 100%;
}

.left, .right {
    background : white;
       display : table-cell;    
        border : 2px dotted dodgerBlue;
 border-radius : 10px;
}
.left {
    width : 27.5%;
}
.right {
    width : 65%;
}
.spacer {
       display : table-cell;
    background : transparent;
         width : 7.5%;
    text-align : center;
}

JavaScript

function fillClear() {
    if (document.getElementById("fillMe").innerHTML == "") {
        for (i = 0; i < 30; i++) {
            document.getElementById("fillMe").innerHTML += "<p>Some Text...</p>";
        }
    } else {
        document.getElementById("fillMe").innerHTML = "";
    }
}