JSFiddle - React, Tailwind, and code Playground

HTML

<main>

			<div id="project">
        <ul>
          <li>z</li>
          <li>z</li>
          <li>z</li>
          <li>z</li>
          <li>z</li>
          <li>z</li>    
        </ul>
			</div>

      <div class="minus">
        <a href="#" class="close close_project">
          <i class="fa fa-caret-left"></i>
        </a>
      </div>

      <div id="pages">
        <textarea name="text" id="texta-pages" placeholder="your page"></textarea>
      </div>
      
      <div class="minus">
        <a href="#" class="close close_notes">
          <i class="fa fa-caret-right"></i>
        </a>
      </div>

      <div id="notes">
        <textarea name="notes" id="texta-notes" placeholder="your notes"></textarea>
      </div>

  	</main>

CSS

html, body {
    height: 100%;
    padding: 0;
}
.container{
	height: 100%;
	width:100%;
}
main{
	height:90%;
}
#project, .minus, #pages, #notes{
	height:100%;
	float:left;
}
#project{
	width:150px;
}
.minus{
	background-color:#CCC;
	width:20px;
}
#pages{
	width:calc((100% - 2*20px - 150px)/2);
}
#notes{
	width:calc((100% - 2*20px - 150px)/2);
}

.close{
	display:block;
	width:100%;
	height:100%;
}

/* no effect on clicking links */
a:active, a:focus{
  outline:0;
}
/* no focus on textarea */
#texta-pages, #texta-notes:focus {outline:0px none transparent;}

/* textareas */
#pages, #notes{
}
#texta-pages, #texta-notes{
	height:100%;
	width:100%;
	resize:none;
	border:0;
	font-family: 'Open Sans', Helvetica, Arial, sans-serif;
	font-size: 21px;
	line-height:21px;
	overflow-y:scroll;
}

JavaScript

$('.close_project').click(function(){
    $('#project').toggle();
  });

$('.close_notes').click(function() {
    $('#notes').toggle();
  });