My nested columns are giving me trouble with their height. I want them to have equal heights on both big and small screens. Currently, the sizes look perfect on the largest and smallest viewports, but not on medium-sized ones. Check out examples on codepen: Desired behavior of columns: https://codepen.io/marawa/pen/rNyRLyZ
https://i.sstatic.net/Kw4bo.png Current behavior (check responsiveness): https://codepen.io/marawa/pen/xxqBOde [
<div class="container-fluid">
<div class="row rad1 justify-content-center">
<div class="col-md-5 col1">
<h2 class="text-center">Vasketips</h2></br>
<p>Diamondcare er en keramisk coating...</li>
</ul>
</div>
<div class="col-md-5 col2">
<div class="row rad2 justify-content-center">
<div class="col-12 col3">
<div class="ratio ratio-16x9">
<iframe
src="https://www.youtube.com/watch?fbclid=IwAR2KcXLf_v8knVxaJzKdD7WpLzJGrdrqd1pG_kbzB5arEKpRkKPSNvTh9h4&v=HVp1321oon8&feature=youtu.be"
allowfullscreen
></iframe>
</div>
</div><!--end of col3-->
<div class="col-12 col4">
<h4>Har du spørsmål?</h4>
<div class="mb-3">
<label for="exampleFormControlInput1" class="form-label">E-post</label>
<input type="email" class="form-control" id="exampleFormControlInput1" placeholder="Din e-post">
</div>
<div class="mb-3">
<label for="exampleFormControlTextarea1" class="form-label" placeholder="Skriv ditt spørsmål her...">Spørsmål</label>
<textarea class="form-control" id="exampleFormControlTextarea1" rows="3"></textarea>
</div>
<div class="mb-3">
<input class="btn btn-custom" type="submit" value="Submit">
</div>
</div><!--end of col4-->
</div><!--end of rad2-->
</div><!--end of col2-->
</div><!--end of rad1-->
</div><!--end of container-fluid-->
I am looking to achieve equal column heights across all viewports until they collapse in the smaller screens. If that is not possible, then I would like them to transition directly from full size to collapsed when moving from full size to medium size.
I suspect the disparity in heights may be due to the specific Bootstrap code used for the video and form placement with margins and padding. Despite reading Bootstrap 5 materials and attempting to fix the issue, I haven't had any luck. Hoping someone here might have the solution!