title: How to Align two p elements displayed inline with different font-size at top?
body: <p>I have to inline p elements that have a different font size and want to align them at the top, so their edges matches.</p>
  
  <p>how is this accomplished?</p>
  
  <pre><code>&lt;!doctype html&gt;
  &lt;html&gt;
  &lt;head&gt;
  &lt;style&gt;
  body {border:0.1em red solid; width:100%; padding:5em;}
  p {display:inline; vertical-align:top}
  .big {font-size:9em; }
  .text {font-size:2em; }
  .container{height:15em;}
  &lt;/style&gt;
  &lt;meta charset="UTF-8"&gt;
  &lt;title&gt;Text Align&lt;/title&gt;
  &lt;/head&gt;
  
  &lt;body&gt;
  
  &lt;p class="big"&gt;x&lt;/p&gt;&lt;p class="text"&gt; HELLO WORLD&lt;/p&gt;
  
  
  &lt;/body&gt;
  &lt;/html&gt;
  </code></pre>
  
  <p>Update:</p>
  
  <p>Here's the code in a more real world example. While adjusting the line-height works, I have trouble getting them to the upper edge of the footer container.</p>
  
  <pre><code>    &lt;!doctype html&gt;
  &lt;html&gt;
  &lt;head&gt;
  &lt;style&gt;
  body {border:0.1em red solid; width:600px; padding:1em; }
   p {display:inline-table; vertical-align:top; padding:0em; margin:0em; background-color:red;}
  .big {font-size:9em; line-height:35px; padding:0em;}
  .text {font-size:2em;}
  .footer {background-color:green; padding:0em; line-height:1.7em; height:auto; overflow:hidden;}
  .area {background-color:yellow; height:500px; margin-bottom:1em; padding:0em;}
  &lt;/style&gt;
  &lt;meta charset="UTF-8"&gt;
  &lt;title&gt;Text Align&lt;/title&gt;
  &lt;/head&gt;
  
  &lt;body&gt;
  &lt;div class="area"&gt;
  &lt;/div&gt;
  &lt;div class="footer" &gt;
  &lt;div style="margin:5em auto; display:table;"&gt;
  &lt;p class="big"&gt;x&lt;/p&gt;
  &lt;p class="text"&gt; HELLO WORLD&lt;/p&gt;
  &lt;/div&gt;
  &lt;/div&gt;
  
  &lt;/body&gt;
  &lt;/html&gt;
  </code></pre>