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

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>