Struggling to align the content of two columns in a row at the same height? You're not alone!
Here is the HTML and CSS code snippet using Bootstrap 5:
<div class="row">
<div class="col-md-2" style="border: 1px solid; border-color: #FFFFFF;">
<i class="fas fa-mobile-alt fa-2x" style="color: #FFFFFF;"></i>
</div>
<div class="col-md-10" style="border: 1px solid; border-color: #FFFFFF;">
<span class="p-phone">Telefono e fax: +39 123456789</span>
</div>
</div><!-- end row -->
The "p-phone" class defined as:
.p-phone{
color: #FFFFFF;
font-weight: bold;
font-size: 1.5rem;
}
Looking for assistance to align the content in the columns evenly?
Check out the updated jsfiddle link for more information:
https://jsfiddle.net/davidep/fwcudq0y/3/
The goal is to have the content inside both columns aligned at the same height.