JSFiddle - React, Tailwind, and code Playground

HTML

<div class="container">
  <div class="box one">Box One (margin-bottom: 50px)</div>
  <div class="in-between-dweller">I'm supposed to cover all the space between the two boxes...</div>
</div>
<div class="container">
  <div class="box two">Box Two (margin-top: 100px)</div>  
</div>

CSS

.container {
  position: relative;
}

.box {
  height: 100px;
  border: 1px solid #AAA;
  background-color: #FAFFBB;
}

.one {  
  margin-bottom: 50px;
}

.two {  
  margin-top: 100px;
}

.in-between-dweller {
  background-color: rgba(255,128,255, 0.3);
  position: absolute;
  bottom: -50px;
  left: 0;
  height: 50px;
  width: 100%;
}