html - Align the two <p> element in the same line

Question

This is the Demo.

I want to align the two <p> element in the same line, but you can see the second one moves down a little bit. Anybody knows the reason?

HTML

<div class="logo">
    <p>Hello world</p>
    <p class="web_address">Hello all</p>
</div>

CSS

.logo p {
    margin:0;
    padding:0;
    border: solid 1px black;
    margin-left: 20px;
    font-size: 36px;
    display: inline-block;
    line-height: 80px;
}

Answer 1

Inline(-block) elements (the paragraphs in this case) are aligned vertically in their baseline by default. You could add vertical-align: top; to fix the alignment issue.

Updated Demo.

.logo p {
    /* other styles goes here... */
    display: inline-block;
    vertical-align: top;
}

For further details you can refer this answer.