Divs of Unequal Sizes are Unable to Center Relative to Top

Question

So I have two div elements with one smaller than the other. I "centered" them with a wrapper class with "width: 80%; margin: 0 auto; text-align: center;" as well as each of their individual classes with "width: 30%; display: inline-block;". They are centered; however, one of them is lower than the other so it is not centered relative to the first div if that makes sense.

.wrapperPost{
    width: 80%;
    margin: 0 auto;
    text-align: center;
}

.sidePost{  
    width: 30%;
    display: inline-block;
}

<div class="wrapperPost">
    <div class="sidePost">
        <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Morbi 
        bibendum, urna ac convallis porta, lectus sapien porttitor nequeeget 
        luctus nunc tortor pharetra lectus. Nunc eget sem et elit vestibulum 
        pharetra.
        </p>
    </div>

    <div class="sidePost">
        <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Morbi 
        bibendum, urna ac convallis porta</p>
    </div>
</div>

As of right now the only thing wrong is the second div element being lower than the one to its left. I want them to line up at the top.

Edit: Here is a JSFiddle https://jsfiddle.net/JohnstonLiu/75wystL9/

Answer 1

You just simple add vertical-align: top to the sidePost class. Or use modern CSS layout like Flexbox to build. See example here