It seems like a straightforward issue, but I'm having trouble finding a solution.
I am utilizing Bootstrap5 for this project.
You can find the complete code here :
Due to some problems with Codeply, I have also uploaded it on jsfiddle.
https://jsfiddle.net/paul_z/y7a6dnkf/1/
This is primarily a contact directory page. The structure of the code is as follows:
<div class="container">
<div class="row gy-5">
<div class="col-lg-6">
<div class="card m-b-30">
<div class="card-body py-5">
<div class="row">
<div class="col-lg-4 text-center">
<img src="/static/logo.png" alt="logo" >
</div>
<div class="col-lg-8">
<h5 class="card-text mb-0"><i class="fa-solid fa-person"></i> user 1</h5>
<p class="card-text">CDD IT Informatique</p>
<hr class="dropdown-divider">
<p class="card-text"><i class="fa-sharp fa-solid fa-building"></i> ###</p>
<p class="card-text"><i class="fa-solid fa-envelope"></i> mail</p>
<p class="card-text"><i class="fa-solid fa-phone"></i> phone</p>
</div>
</div>
</div>
</div>
</div>
...
On larger screens, two cards are displayed in each column.
The issue arises when the cards have varying heights. For instance, for user 2, their role changes to "Enseignant Chercheur Astrophysique Hautes Energies" instead of "CDD IT Informatique," causing the line to wrap and increase the card's height. This results in the card for user 2 having a different height compared to other cards.
Any suggestions on how to address this? Since I do not know the exact size of the cards, fixing it implicitly may not be the best approach (if possible at all).
P.S.: I face a similar problem when logos have different dimensions. Despite adjusting parameters like img-fluid, width, max-width, max-height, etc., some logos end up changing the card's height. However, my priority is tackling the basic height issue first.