JSFiddle - React, Tailwind, and code Playground

HTML

<div id="main">
  <div class="text"><p>LAST TEXT</p><p>test</p><p>test</p><p>test</p><p>test</p><p>test</p><p>test</p><p>test</p><p>test</p><p>test</p><p>test</p><p>test</p><p>test</p><p>FIRST TEXT</p></div>
</div>
<input type="text" class="input">

CSS

.text {
  height: 10em;
  overflow: auto;
  display: flex;
  flex-direction: column-reverse;
}
p {
  margin: 0
}