JSFiddle - React, Tailwind, and code Playground

by Константин Дралюк

HTML

<div class="cont">
  <div class="grid1">
    <div class="title">123</div>
    <div class="body">jhgouhtguhr</div>
  </div>
  <div class="grid2">
    <div class="resize-hadler">***</div>
  </div>
  <div class="footer"></div>
</div>

CSS

* {
  box-sizing: border-box;
}

html, body {
  margin: 0;
  height: 100%;
}

.cont {
  display: flex;
  flex-direction: column;
  height: 100%;
}

.grid1 { 
  height: 100%;
  background: yellow;
}

.grid2 { 
  height: 40%;
  flex-shrink: 0;
  background: green;
}

.footer {
  height: 100px;
  background: #f00;
}

.resize-hadler {
  background: violet;
  display: flex;
  align-items: center;
}
.resize-hadler:before, .resize-hadler:after {
  content: '';
  width: 50%;
  height: 2px;
  background: #000;
}