JSFiddle - React, Tailwind, and code Playground

by bergb

HTML

<div class="container">
<div class="block block-1">block1</div>
<div class="block block-2">block2</div>
</div>

CSS

.container {
  display: flex;
  flex-direction: column;
  height: 100%;
  align-content:stretch;
}

.block-1 {
  background: red;
  height: 70%;
}
.block-2 {
  background: blue;
  height: 30%;
}
html, body {
    height: 100%;
    margin: 0;
}