Как выровнять текст под картинками разного размера?

Question

[Egorian]

<div id="icons">
       <div class="icon">
<img src="img/Install.svg" alt="" class="icon_img" >
          <p>Lorem Ipsum</p>
</div>
        <div class="icon">
<img src="img/Shield.svg" alt="" class="icon_img">
        <p> Lorem Ipsum</p>
</div>
     </div>

#icons{
    margin-top: 5%;
    display: flex;
    height: 100%;
    width: 100%;
    justify-content: center;
    align-items: center;
}
.icon{
    width: 25%;
    height: 15vh;
    display: flex;
    flex-direction: column;
    vertical-align: bottom;
}
.icon p{
}
.icon_img{
}

Изображения не одинакового размера. Как сделать чтобы p прижимался к низу блока или есть другой способ чтобы текст был внизу и на одном уровне с другими p ?

Answer 1

[Dymok]

Использовать flexbox
https://codepen.io/UnluckySerivelha/pen/WJgzMQ