I'm trying to create a layout similar to this: I've managed to get most of it working, but I'm struggling with the yellow rectangle that spans the background of the screen. Currently, it looks like this:
The issue is that the rectangles are not the same height due to the images on the left and right having different heights. While I could hardcode a fixed value for the rectangle height, I'd prefer a responsive solution like 'height: 80%' in this case.
I attempted using flexbox to make the divs containing the rectangle and image fill up the remainder of the parent div, but it only made the problem worse.
<div class="justify-content-center row row-cols-4" style="display: flex;">
<div class="col" style="padding: 0px; align-self: flex-end;">
<div style="position: relative;">
<img src="https://cdn.contrastly.com/wp-content/themes/contrastly-v9/images/anthropics-portraitpro.png" style="width: 70%;"></img>
<div style="background-color: rgb(253, 221, 57); height: 80%; width: 100%; z-index: -1; position: absolute; bottom: 0px;">
</div>
</div>
<div style="align-self: flex-end;">
<h3 style="font-weight: 700; font-size: calc(12px + 0.5vw); margin-bottom: 0px;">President</h3>
<p style="font-weight: 300; font-size: calc(12px + 0.3vw); margin-bottom: 0px;">Name Goes Here</p>
</div>
</div>
<div class="col" style="padding: 0px; align-self: flex-end;">
<div style="position: relative;">
<img src="https://assets.grooveapps.com/images/5fff4a731d2cfa006f386042/1624073591_Professional-Headshots-Portraits-by-Jared-Wolfe-Alexandria-VA-Portrait-Studio-Testimonial-01.png" style="width: 70%;"></img>
<div style="background-color: rgb(253, 221, 57); height: 80%; width: 100%; z-index: -1; position: absolute; bottom: 0px;">
</div>
</div>
<div style="align-self: flex-end;">
<h3 style="font-weight: 700; font-size: calc(12px + 0.5vw); margin-bottom: 0px;">Vice President</h3>
<p style="font-weight: 300; font-size: calc(12px + 0.3vw); margin-bottom: 0px;">Name Goes Here</p>
</div>
</div>
</div>