Can someone help me create a card similar to this design?
I'm having trouble aligning the items at the bottom like in this example:
Here is my code snippet:
<div class="container">
<div class="row row-cols-1 row-cols-md-2 g-3 my-3">
<div class="col">
<div class="card text-uppercase">
<img src="/../../assets/img/Affiliate_1fdd38b1-d99f-4d5a-b1ee-c4d30397dd2c_643x450.webp" class="card-img" alt="...">
<div class="card-img-overlay">
<h5 class="card-title">FUNCIONAL</h5>
<p class="card-text">This is a longer card with supporting text below as a natural lead-in to additional
content.</p>
<a href="#" class="btn btn-primary">Go somewhere</a>
</div>
</div>
</div>
<div class="col">
<div class="card text-uppercase show-bottom">
<img src="/../../assets/img/Affiliate_1fdd38b1-d99f-4d5a-b1ee-c4d30397dd2c_643x450.webp" class="card-img" alt="...">
<div class="card-img-overlay d-flex flex-column">
<h5 class="card-title">FUNCIONAL</h5>
<p class="card-text mt-auto">This is a longer card with supporting text below as a natural lead-in to additional
content.</p>
<a href="#" class="btn btn-primary mt-auto">Go somewhere</a>
</div>
</div>
</div>
</div>
</div>
I've attempted using the "d-flex" and "flex-column" classes within the "card-img-overlay" div, as well as adding "mt-auto" to the button class, but I haven't been successful.