JSFiddle - React, Tailwind, and code Playground

HTML

<div class="main-box">
my top content which can grow in height as much as possible.<br /><br />
my top content which can grow in height as much as possible.<br /><br />
my top content which can grow in height as much as possible.<br /><br />
my top content which can grow in height as much as possible.<br /><br />
my top content which can grow in height as much as possible.<br /><br />
my top content which can grow in height as much as possible.<br /><br />
my top content which can grow in height as much as possible.<br /><br />
my top content which can grow in height as much as possible.<br /><br />
this is very cool!<br /><br />
</div>

<div class="add-on">
my bottom content at a set height - required!<br /><br />
</div>

CSS

.main-box {
   padding:0 0 300px 0; 
  margin:0 auto -700px;
  background:red; /*...or whatever you want it to be!*/
}

.add-on {
  padding:0;
  margin:400px 0 0;
  height:300px;  
}