I've been studying web development for 2 months now. Currently tinkering with bootstrap. How do I fix this problem?
I want the 2 columns to be same height but the right columns keeps on overflowing. I assumed that the left column will match the height of the right since its the biggest but that is not the case.
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap@5.1.3/dist/css/bootstrap.min.css" integrity="sha384-1BmE4kWBq78iYhFldvKuhfTAU6auU8tT94WrHftjDbrCEXSU1oBoqyl2QvZ6jIW3" crossorigin="anonymous">
<div class="container mb-5">
<div class="row overflow-hidden">
<div class="col-lg-6">
<div class="row bg-dark pt-2 pb-2 msNewsItemHover">
<div class="col-lg-2">
<img src="https://via.placeholder.com/50" class="msNewsItemImg">
</div>
<div class="col-lg-10">
<span class="d-block redText fw-bold text-truncate">Mojiken Studios Cyberpunk Visual Novel Divination Out On All Console</span>
<span class="d-block text-light fw-lighter pt-2 text-truncate">Lorem ipsum, dolor sit amet consectetur adipisicing elit. </span>
<span class="d-block text-light fw-lighter text-truncate"><i class="bi bi-calendar-check"></i> 08/18/1990</span>
</div>
</div>
<div class="row bg-dark pt-2 pb-2 msNewsItemHover">
<div class="col-lg-2">
<img src="https://via.placeholder.com/50" class="msNewsItemImg">
</div>
<div class="col-lg-10">
<span class="d-block redText fw-bold text-truncate">Kingdom Hearts 4 Trailer May Tease a Star Wars Section</span>
<span class="d-block text-light fw-lighter pt-2 text-truncate">Lorem ipsum, dolor sit amet consectetur adipisicing elit. </span>
<span class="d-block text-light fw-lighter text-truncate"><i class="bi bi-calendar-check"></i> 08/18/1990</span>
</div>
</div>
<div class="row bg-dark pt-2 pb-2 msNewsItemHover">
<div class="col-lg-2">
<img src="https://via.placeholder.com/50" class="msNewsItemImg">
</div>
<div class="col-lg-10">
<span class="d-block redText fw-bold text-truncate">Elden Ring: Speedrunner Beats the Game in Less Than 9 Minutes</span>
<span class="d-block text-light fw-lighter pt-2 text-truncate">Lorem ipsum, dolor sit amet consectetur adipisicing elit. </span>
<span class="d-block text-light fw-lighter text-truncate"><i class="bi bi-calendar-check"></i> 08/18/1990</span>
</div>
</div>
<div class="row bg-dark pt-2 pb-2 msNewsItemHover">
<div class="col-lg-2">
<img src="https://via.placeholder.com/50" class="msNewsItemImg">
</div>
<div class="col-lg-10">
<span class="d-block redText fw-bold text-truncate">Kingdom Hearts 4 Will Use Unreal Engine 5</span>
<span class="d-block text-light fw-lighter pt-2 text-truncate">Lorem ipsum, dolor sit amet consectetur adipisicing elit. </span>
<span class="d-block text-light fw-lighter text-truncate"><i class="bi bi-calendar-check"></i> 08/18/1990</span>
</div>
</div>
</div>
<div class="col-lg-6">
<div class="row bg-dark pt-2 pb-2">
<img src="https://via.placeholder.com/500" class="img-fluid">
<span class="d-block redText fw-bold text-truncate">Kingdom Hearts 4 Will Use Unreal Engine 5</span>
<span class="d-block text-light fw-lighter text-truncate">Lorem ipsum dolor sit, amet consectetur adipisicing elit. Accusantium eaque obcaecati cumque officia eos nisi, voluptates reiciendis totam! Expedita doloribus enim natus esse fugit harum, quisquam similique laudantium corrupti impedit.</span>
</div>