JSFiddle - React, Tailwind, and code Playground

by Victor

HTML

<div class="center">
    <h2>Project Files</h2>
    <div class="fileList">
  sdfsdf  
</div>
<div class="loadedRecords">
    <h2>Loaded Records</h2>
      <span class="upRecord">
          title
      </span>
          <span class="upRecord">
          title
      </span>
          <span class="upRecord">
          title
      </span>
          <span class="upRecord">
          title
      </span>
</div>
    
</div>

CSS

*, *:before, *:after {
  -moz-box-sizing: border-box; -webkit-box-sizing: border-box; box-sizing: border-box;
 }

.center {
    margin:0;
}
.fileList, .loadedRecords {
    width:50%;
    background:#e3e3e3;
    position:absolute;
    top:0;
    border:1px solid #999;
    height:100%;padding:1%;
    box-shadow:inset 0 0 5px white;
}
.loadedRecords {
    right:0;
    padding:0;
    border-left:none;
}

.upRecord {
    width:100%;
    height:auto;
    padding:3%;
    display:block;
    background:#2F7ED8;
    color:white;
    font-weight:bold;
    box-shadow:inset 0 1px 0 #3898FF, inset 0 -1px 0 #1E5289;
}

JavaScript

var winheight = $(window).height();
$('.center').height(winheight);