Content of div affects horizontal alignment, inline-block issue

I'm struggling a bit with this CSS-issue: http://jsfiddle.net/timkl/JbEX8/ I want two divs to align horizontally using "display: inline-block", however when I add text to one of the divs, the alignment is off. Is there a way to make the two divs align without resorting to floats? This is my markup: ``` <div class="box"> <p>Some text</p> </div><!-- /box --> <div class="box"> <!-- No text --> </div><!-- /box --> ``` This is my CSS: ``` body { color: gray; } .box { background: #ccc; height: 100px; width: 200px; display: inline-block; } ``` Check out my example on jsfiddle: http://jsfiddle.net/timkl/JbEX8/