How to align items with different heights? - html

Question

I'm not sure how better to describe it, so:
I have a grid for 12 columns. (2 identical icons and 2 texts with different heights) per 6 columns. Is there any way to align icons by center and texts by the same height? I'm able to align icons but texts are always on different heights.
.benefits .benefits_item {
display: flex;
justify-content: center;
align-items: center;
margin-top: 35px;
min-height: 150px;
}
.benefits .benefits_item .benefits_round {
display: flex;
justify-content: center;
align-items: center;
margin-right: 25px;
width: 116px;
height: 116px;
background: #1EACC7;
border-radius: 50%;
}
.benefits .benefits_item .benefits_descr {
width: 370px;
font-family: 'Roboto';
font-style: normal;
font-weight: 300;
font-size: 15px;
color: #202020;
}
.benefits .benefits_item .benefits_descr span {
font-family: 'Roboto';
font-style: normal;
font-weight: 400;
font-size: 17px;
line-height: 25px;
color: #1EACC7;
<div class="row">
<div class="col-md-6">
<div class="benefits_item">
<div class="benefits_round"><img src="" alt="1" class="benefits_icon"></div>
<div class="benefits_descr"><span>Lorem ipsum dolor sit ame</span><br>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec arcu ligula, lacinia vel fermentum elementum</div>
</div>
</div>
<div class="col-md-6">
<div class="benefits_item">
<div class="benefits_round"><img src="" alt="2" class="benefits_icon"></div>
<div class="benefits_descr"><span>Lorem ipsum</span><br>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec arcu ligula, lacinia vel fermentum elementum, malesuada vel ante. Donec ut odio augue. Integer a aliquet quam. Aenean ut enim ullamcorper, feugiat neque ac,
pretium augue.</div>
</div>
</div>
</div>

Answer 1

You can add align-items-center to <div class="row"> -- Bootstrap's rows use display: flex so you can use other flex utility classes on the row
:root {
--color: #1EACC7;
--iconSize: 6rem;
}
.benefits_round {
height: var( --iconSize );
max-width: var( --iconSize ); min-width: var( --iconSize );
background-color: var( --color );
}
.benefits_descr span { color: var( --color ) }
<link href="https://cdn.jsdelivr.net/npm/bootstrap#5.1.3/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-1BmE4kWBq78iYhFldvKuhfTAU6auU8tT94WrHftjDbrCEXSU1oBoqyl2QvZ6jIW3" crossorigin="anonymous">
<div class="container-md">
<div class="row align-items-center">
<div class="col-sm-6">
<div class="d-flex justify-content-center align-items-center">
<div class="benefits_round rounded-circle me-4 d-flex justify-content-center align-items-center">
<img src="" alt="1">
</div>
<div class="benefits_descr fw-light">
<span class="fs-5">Lorem ipsum dolor sit ame</span>
<br>
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec arcu ligula, lacinia vel fermentum elementum
</div>
</div>
</div>
<div class="col-sm-6">
<div class="d-flex justify-content-center align-items-center">
<div class="benefits_round rounded-circle me-4 d-flex justify-content-center align-items-center">
<img src="" alt="2">
</div>
<div class="benefits_descr fw-light">
<span class="fs-5">Lorem ipsum</span>
<br>
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec arcu ligula, lacinia vel fermentum elementum, malesuada vel ante. Donec ut odio augue. Integer a aliquet quam. Aenean ut enim ullamcorper, feugiat neque ac, pretium augue.
</div>
</div>
</div>
</div>
</div>