JSFiddle - React, Tailwind, and code Playground

HTML

<div class="flexContainer">
  <div class="fxel fxel1">
    <p>some text</p> 
    <p>some text</p> 
  </div>
  <div class="fxel fxel2">
    <p>loads of text</p> 
    <p>loads of text</p>
    <p>loads of text</p>
    <p>loads of text</p> 
    <p>loads of text</p>
    <p>loads of text</p>
    <p>loads of text</p> 
    <p>loads of text</p>
    <p>loads of text</p>
    <p>loads of text</p> 
    <p>loads of text</p>
    <p>loads of text</p>
    <p>loads of text</p> 
    <p>loads of text</p>
    <p>loads of text</p>
    <p>loads of text</p> 
    <p>loads of text</p>
    <p>loads of text</p>
  </div>
</div>

CSS

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

.flexContainer {
 height: 25em;
 width: 100%;
 display: flex;
 flex-direction: column;
 flex-wrap: nowrap;
 background-color: pink;
}

.fxel1 {
  height: 4em;
}

.fxel2 {
  height: 21em;
  overflow: scroll;
}

.fxel {
  /* css */
}