JSFiddle - React, Tailwind, and code Playground

HTML

<div class="main" style="height:400px">
<div class="header">the header height is fixed and cannot be changed</div>
<div class="middle-content">this div needs to grow/shrink depending on what height we enter in the inline style of "main" class to match up to the height of the main class</div>
<div class="bottom">
the bottom height is fixed and cannot be changed
  <button>
  Trext1
  </button>
   <button>
  Text333
  </button>
</div>
</div>
<!-- the white space needs to be filled correctly by growing the blue color div -->

CSS

.header {
  height: 30px;

  background-color: red;
  padding: 20px 54px;
}

.bottom {
 
  height: 40px;
  background: green;
  padding: 60px 54px;
}

.middle-content {
  background: blue;
  padding: 20px 54px;
  /*height: calc(100% - (300-200)+"px");*/
  /*//height of main class div - (header + bottom)*/
}

.main {
  border: 2px solid #000;
  width: 100%;
}