Dúvida CSS - Como alinhar imagens e legendas lado a lado proporcionalmente

[Jota's]

Galera, alguém poderia me ajudar? Estou querendo alinhar essas 4 imagens, títulos e respectivas legendas uma ao lado da outra, porém, as legendas da 3 e 4 imagens são diferentes das outras, o que acaba afetando a formatação, porém, quero que as imagens, texto... fiquem alinhados corretamente independente do tamanho do conteúdo que eu legendar.

HTML

<section id="sec">
                <div id="basicInformations">
                    
                    <figure id="laptopLogo">
                        <img src="Layouts/logos/outLaptop.png" />
                        <p class="titleImg">Web Design</p>
                        <p id="pLaptop">
                            At vero eos et accusamus dignissimos ducimus <br>
                            qui blanditiis praesentium atque corrupti <br>
                            quas molestiasexcepturi <br>
                            sint occaecati<br>
                        </p>
                    </figure>
                
                    <figure id="magnifyingGlassLogo">
                        <img src="Layouts/logos/outMagnifyngGlass.png"/>
                        <p class="titleImg">All Suport</p>
                        <p id="pMGlass">
                            Nam libero tempore, cum soluta nobis est eligendi optio <br> 
                            cumque nihil impedit quo minus id quod maxime placeat facere <br> 
                            possimus, omnis voluptas assumenda est, <br>
                            omnis dolor <br>
                        </p>
                    </figure>

                    <figure id="shoppingCartLogo">
                        <img src="Layouts/logos/shoppingCart.png"/>
                        <p class="titleImg">Best Price</p>
                        <p id="pShoppingCart">
                            Itaque earum rerum hic tenetur a sapiente <br>
                            delectus, ut aut reiciendis voluptatibus maiores alias <br> 
                            consequatur aut perferendis doloribus <br>
                            so blinded by desire, that they cannot foresee <br>
                            asperiores repellat. <br>
                        </p>
                    </figure>

                    <figure id="facebookLogo" >
                        <img src="Layouts/logos/finger.png"/>
                        <p class="titleImg">Follow Us</p>
                        <p id="pFinger">
                            On the other hand, we denounce with righteous indignation <br>
                            and dislike men who are so beguiled and demoralized by the charms <br> 
                            of pleasure of the moment, so blinded by desire <br>
                        </p>
                    </figure>

                </div>

CSS

div#basicInformations{
    background-color: white;
    left: 40px;
}

div#basicInformations figure{
    display: inline-block;
    
}

div#basicInformations p{
    font-size:11px;
    text-align: center;
    color: #acacac;
    margin-left: 5px;
    
}

div#basicInformations .titleImg{
    text-align: center;
    color: #454545;
    font-size: 25px;
    font-weight: bold;
    margin-left: 5px;
    height: 100%;

}

div#basicInformations figure img{
    position: relative;
    width: 200px;
    height: 200px;
    margin: 5px;
}

 

 

Galera, como voces podem notar na imagem, a 3 logo está mais acima e a 4 mais a baixo;