JSFiddle - React, Tailwind, and code Playground

by mattonit

HTML

<div class="wrapper">
  <div class="up">
    <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Ipsa ut, ad. Ipsa architecto atque, iusto alias quidem quae sequi quos temporibus dolor, ipsum quis repudiandae ad maiores reiciendis, mollitia obcaecati.
    </p>
    <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Ipsa ut, ad. Ipsa architecto atque, iusto alias quidem quae sequi quos temporibus dolor, ipsum quis repudiandae ad maiores reiciendis, mollitia obcaecati.
    </p>
  </div>
  <div class="down">
    Lorem ipsum dolor sit amet, consectetur adipisicing elit. Iste facilis ipsam dolore error, nam et. Amet maiores fugit provident facilis et expedita impedit necessitatibus mollitia quibusdam. Veniam ad dolores deserunt.
  </div>
</div>

CSS

.wrapper {
  display:flex;
  flex-direction:column;
  min-height:100vh;
  justify-content: space-between;
}

.up {
  background: crimson;
  flex:0 1 auto;
}

.down {
  flex:1 1 auto;
  background: royalblue;
}