JSFiddle - React, Tailwind, and code Playground

by TheDiamondDoge

HTML

<div class="container">
  <div class="timeline"></div>
  <div class="data_container">
    <div class="left">
      <div id="field_names">
      
      </div>
      <div id="field_values">
      
      </div>
    </div>
    <div class="right"></div>
  </div>
</div>

CSS

html,
body {
  height: 100%;
  width: 100%;
}

div {
  border: 1px black solid;
}

.container {
  height: 100%;
  width: 100%;
}

.timeline {
  width: 100%;
  height: 150px;
  background-color: grey;
}

.data_container {
  display: flex;
  width: 100%;
  height: 100%;
  background-color: yellow;
 
}

.left, .right {
  width: 50%;
  height: 100%;
  
}

#field_names {
  width: 30%;
  height: 100%;
}

#field_values {
  width: 70%;
  height: 100%;
}