Align the two 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.

Answer 2

<span> might be a better solution:

http://jsfiddle.net/Zxefz/

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

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

.logo .web_address{
    font-size:26px;
}

Answer 3

the following worked for me:

.toptext {
  display: flex;
  align-items: center;
}

<div class="toptext">
  <p>Please ensure all original documents requested are enclosed</p>
  <p id="right">Claim Reference No.: <input type="text" name="" value=""></p>
</div>