Align tex with heigh of icon - css

Question

I use bootstrap 5
Instead of having text below icon, I would like text align verticaly with icon heigh
h3 {
text-align: center;
}
.testHead {
background-color: #5c636a;
color: white;
text-align: center;
}
.testHead .col {
font-size: 1.2rem!important;
}
.testHead i {
font-size: 4rem!important;
}
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap-icons#1.3.0/font/bootstrap-icons.css">
<link href="https://cdn.jsdelivr.net/npm/bootstrap#5.0.2/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-EVSTQN3/azprG1Anm3QDgpJLIm9Nao0Yz1ztcQTwFspd3yD65VohhpuuCOmLASjC" crossorigin="anonymous">
<nav class="testHead">
<h3>For a few dollar</h3>
<br>
<div class="row">
<div class="col ">
<i class="bi bi-display"></i> Answer simple question
</div>
<div class="col">
<i class="bi bi-download"></i> Download and print
</div>
<div class="col">
<i class="bi bi-clock"></i> It take less then 10 minutes
</div>
</div>
</nav>
Search to get something like

Answer 1

Make your elements flex, it's the easiest solution.
Add these Bootstrap classes to your elements that need to be vertically centered like this :
<nav class="testHead">
<h3>For a few dollar</h3>
<br />
<div class="row">
<div class="col d-flex align-items-center">
<i class="bi bi-display"></i>
Answer simple question
</div>
<div class="col d-flex align-items-center">
<i class="bi bi-download"></i>
Download and print
</div>
<div class="col d-flex align-items-center">
<i class="bi bi-clock"></i>
It take less then 10 minutes
</div>
</div>
</nav>

Answer 2

or with simple CSS.
Surround your texts with a p tag, with a classname to give the margin-letf
Ex :
<div class="col d-flex align-items-center">
<i class="bi bi-display"></i>
<p class="descr">Answer simple question</p>
</div>
and then apply css to your <div class="col"> :
.col {
display:flex;
align-items:center;
}
.col .descr {
margin-left: 10px
}