JSFiddle - React, Tailwind, and code Playground

HTML

<div class="header">
  <div class="output">
      <span> <p>Hello World! </p> </span>
      <span> <p>Hello World! </p> </span>
      <span> <p>Hello World! </p> </span>
      <span> <p>Hello World! </p> </span>
      <span> <p>Hello World! </p> </span>
      <span> <p>Hello World! </p> </span>
      <span> <p>Hello World! </p> </span>
      <span> <p>Hello World! </p> </span>
      <span> <p>Hello World! </p> </span>
      <span> <p>Hello World! </p> </span>
      <span> <p>Hello World! </p> </span>
      <span> <p>Hello World! </p> </span>
      <span> <p>Hello World! </p> </span>
      <span> <p>Hello World! </p> </span>
      <span> <p>Hello World! </p> </span>
      <span> <p>Hello World! </p> </span>
      <span> <p>Hello World! </p> </span>
      <span> <p>Hello World! </p> </span>
  </div>   
</div>


<div class="main"></div>

CSS

.header {
  background-color: yellow;
  height: 70vh;
  overflow-y: scroll;
  display: flex;
}

.output {
    align-self: flex-end;
}

.main {
  background-color: orange;
  height: 20vh;
}