JSFiddle - React, Tailwind, and code Playground

by bd22

HTML

<div class="conatiner">

<div id="topContainer">
  <div id="appTitle"> No Application Name </div>
  
  <button>BTN1</button>
  <button>BTN1</button>
  <button>BTN1</button>
  <button>BTN1</button> <button>BTN1</button>
  <button>BTN1</button>
  <button>BTN1</button>
  <button>BTN1</button>
</div>

<div class="mainArea flex">
 main area
</div>

 <div id='horizontalDragHandle'>
 
 </div>
  <div id="consoleContainer">
  console
  </div>

<!-- fills/grows available space -->
<div>another content</div>
</div>

CSS

.conatiner {
  display: flex;
  flex-direction: column;
  height: 100vh;
}

.flex {
  flex: 1;
    border: 1px solid;
}

.row_,
.row_>* {
  border: 1px solid;
}

#appTitle,#topContainer{
  margin-bottom:5px;
}

#horizontalDragHandle{
  height:4px;
  background:red;
  
}

#consoleContainer{
  height:100px;
}