title: How can I align the tops of two paragraphs in this example without resorting to an empty header? (e.g., <h2>&nbsp;</h2>)
body: <p>Given two side-by-side boxes on a webpage — one containing a header and a paragraph, and the other containing <em>only</em> a paragraph — how can I align the tops of the paragraphs using pure HTML/CSS? i.e., without resorting to using an empty header (e.g., <code>&lt;h2&gt;&amp;nbsp;&lt;/h2&gt;</code>) or JavaScript?</p>
  
  <p>Here's a jsfiddle illustrating the conundrum:
  <a href="http://jsfiddle.net/y5gpe/" rel="nofollow noreferrer">http://jsfiddle.net/y5gpe/</a></p>
  
  <p>Estimating the appropriate <code>margin-top</code> for the headerless paragraph (as seen in the jsfiddle above) seems to be an exercise in futility, since different browsers always have slight variations in font size. There's no way to get them to perfectly align. Case in point: The jsfiddle above is perfectly aligned in Chrome, but it's off by 3px in Firefox:</p>
  
  <p><img src="https://i.stack.imgur.com/2kQVY.png" alt="enter image description here"></p>
  
  <p>Is the only way to do this to create an ugly empty header in the markup of the headerless box? This is a problem that I regularly encounter in HTML/CSS, and I'm wondering if other developers have a more elegant way of handling it.</p>