How to align columns in bootstrap 4?

How to make the text in the second row was exactly under the first row?
5e0d234630d57870834389.png
Problem appeared after adding icons. I understand due to the fact that they have different width. How then to put them exactly? I tried to give them a separate column, but still flies by. If you put on before positioning and that, too, all the curves obtained. How to align them then please tell me.
In two rows if you do it too, all crooked
<div class="row">

 <div class="col-lg-4">
 <div class="features d-flex">
 <i class="fa fa-tablet feature__icon"></i>
 <div class="feature__block">
 <h3 class="feature__title">
 Fully Responsive
</h3>
 <p class="feature__text">
 Lorem ipsum dolor sit amet, consectetur adipiscing elit. Praesent vitae eros eget tellus
 tristique bibendum.
</p>
</div>
</div>
</div>

 <div class="col-lg-4">
 <div class="features d-flex">
 <i class="fa fa-link feature__icon"></i>
 <div class="feature__block">
 <h3 class="feature__title">
 Fully Layered PSD
</h3>
 <p class="feature__text">
 Lorem ipsum dolor sit amet, consectetur adipiscing elit. Praesent vitae eros eget tellus
 tristique bibendum.
</p>
</div>
</div>
</div>

 <div class="col-lg-4">
 <div class="features d-flex">
 <i class="fa fa-folder feature__icon"></i>
 <div class="feature__block">
 <h3 class="feature__title">
 Font Awesome Icons
</h3>
 <p class="feature__text">
 Lorem ipsum dolor sit amet, consectetur adipiscing elit. Praesent vitae eros eget tellus
 tristique bibendum.
</p>
</div>
</div>
</div>

 <div class="col-lg-4">
 <div class="features d-flex ">
 <i class="fa fa-code feature__icon "></i>
 <div class="feature__block">
 <h3 class="feature__title">
 HTML3 & CSS3
</h3>
 <p class="feature__text">
 Lorem ipsum dolor sit amet, consectetur adipiscing elit. <br / > Praesent vitae eros eget
 tellus tristique bibendum.
</p>
</div>
</div>
</div>
 <div class="col-lg-4">
 <div class="features d-flex">
 <i class="fa fa-envelope feature__icon"></i>
 <div class="feature__block">
 <h3 class="feature__title">
 Email Template
</h3>
 <p class="feature__text">
 Lorem ipsum dolor sit amet, consectetur adipiscing elit. Praesent vitae eros eget tellus
 tristique bibendum.
</p>
</div>
</div>
</div>
 <div class="col-lg-4">
 <div class="features d-flex">
 <i class="fa fa-download feature__icon"></i>
 <div class="feature__block">
 <h3 class="feature__title">
 Free to download
</h3>
 <p class="feature__text">
 Lorem ipsum dolor sit amet, consectetur adipiscing elit. Praesent vitae eros eget tellus
 tristique bibendum.
</p>
</div>
</div>
</div>

 </div>
April 4th 20 at 00:31
1 answer
April 4th 20 at 00:33
Solution
From simple - take the value of the widest and prescribe it for everyone, for example, at the level of min-width, etc.
.features i {
 min-width: 50px;/* or whatever value */
}

Find more questions by tags Bootstrap