JSFiddle - React, Tailwind, and code Playground

HTML

<div class="container">
		<div class="left"  onclick="revealtext()">
			click me	
			<div id="display-text" style="display:none">
				left left left left left left left left left left left left left left left left left left left left left left left left left left left left left left left left left left left left left left left left left left left left left left left left left left left left left left left left left left left left left left left left left left left left left left left left left left left left left left left left left left left left left left left left left left left left left left left left left left left left left left left left left left left left left left left left left left left left left left left left left left left left left left left left left left left left left left left left left left left left left left left left left left left left left left left left left left left left left left left left left left left left left left left left left left left left left left left left left left 
			</div>
		</div>
		<div class="middle">
			middle
		</div>
	</div>

CSS

.container {
	background: blue;
    display: flex;
    display: -ms-flexbox;
    flex-direction: row;
    -ms-flex-direction: row;
    height: 200px;
	width: 600px;
}

.left {
	background: darkgray;
    flex: 0 0 200px;
    -ms-flex: 0 0 200px;
    border-right: 5px solid red;
    overflow-y: auto;
    height: 200px;
	width: 200px;
}

.middle {
	background: gray;
    flex: 0 0 400px;
    -ms-flex: 0 0 400px;
    overflow-y: auto;
    border-left: 5px solid green;
    height: 200px;
	width: 400px;
}

JavaScript

revealtext = function() {
	var el = document.getElementById('display-text');
	if (el.style.display == 'block')
		el.style.display = 'none';
	else 
		el.style.display = 'block';
}