title: overlay div in the middle of two divs which don't have fixed height
body: <p>I would like to overlay a <code>&lt;div&gt;</code> on top of two <code>&lt;div&gt;</code>s, and layout it in between these two.</p>
  <p><a href="https://stackoverflow.com/questions/28196741/center-one-div-above-two-other-divs">This</a> SO answer is very close to what I would like to achieve but the answer is not very practical because it explicitly sets the height of the underlying and overlapping <code>&lt;div&gt;</code>s. I would like a solution in which these heights are not set, but rather derived from the situation.</p>
  <p><a href="https://i.stack.imgur.com/rF6d7.png" rel="nofollow noreferrer">Desired output</a></p>
  <p>This <a href="https://jsfiddle.net/xerroxcopy/ktqwae92/40/" rel="nofollow noreferrer">JSFiddle</a> (I'm using Bootstrap 4.5.0) is what I have tried so far. This is fairly close, but the <code>.second</code> <code>&lt;div&gt;</code>'s margin-top is set manually, resulting in the top edge of .second div not touching the .first div's bottom edge.</p>