Div's misalign after child <p> inserted - html

Question

I have 2 div's, one 50% width, the other 25%.
They're suppose to both sit centred horizontally on the one line.
I can get this working fine. But when I insert a paragraph they break.
Any idea why?
http://jsfiddle.net/3KuJa/
html:
<section>
<div class="twothird"> </div>
<div class="onethird"><p>test</p></div>
</section>
css:
.onethird {
width: 25%;
background: white;
min-height: 20em;
display: inline-block;
margin: 20em 3%;
-webkit-box-shadow: 2px 2px 6px 0px rgba(50, 50, 50, 0.75);
-moz-box-shadow: 2px 2px 6px 0px rgba(50, 50, 50, 0.75);
box-shadow: 2px 2px 6px 0px rgba(50, 50, 50, 0.75);
-webkit-border-radius: 5px;
-moz-border-radius: 5px;
border-radius: 5px;
padding: 2em;
text-align:left;
}
.twothird {
width: 50%;
background: white;
min-height: 20em;
display: inline-block;
margin: 20em 3%;
-webkit-box-shadow: 2px 2px 6px 0px rgba(50, 50, 50, 0.75);
-moz-box-shadow: 2px 2px 6px 0px rgba(50, 50, 50, 0.75);
box-shadow: 2px 2px 6px 0px rgba(50, 50, 50, 0.75);
-webkit-border-radius: 5px;
-moz-border-radius: 5px;
border-radius: 5px;
padding: 2em;
text-align:left;
}

Answer 1

Inline block elements align, by default to baseline
This should fix it if applied to both inline-block divs
CSS
display: inline-block;
vertical-align: top;
Adjusted JSfiddle Demo
You may have to widen the display window to check.

Answer 2

since you have box-shadow, i am proposing a solution supported by IE8+ :
use display :table /table-cell for section and div
section {
display:table; /* make parent table type */
width:60%; /* give width */
margin :0 auto; /* center your section */
border:1px solid green /* just for display */
}
.onethird {
width: 25%;
background: white;
min-height: 20em;
display:table-cell;
/* display: inline-block; changed this value */
margin: 20em 3%;
-webkit-box-shadow: 2px 2px 6px 0px rgba(50, 50, 50, 0.75);
-moz-box-shadow: 2px 2px 6px 0px rgba(50, 50, 50, 0.75);
box-shadow: 2px 2px 6px 0px rgba(50, 50, 50, 0.75);
-webkit-border-radius: 5px;
-moz-border-radius: 5px;
border-radius: 5px;
padding: 2em;
text-align:left;
border:1px solid red;
}
.twothird {
width: 50%;
border:1px solid red;
background: white;
min-height: 20em;
display:table-cell;
/* display: inline-block; changed this value */
margin: 20em 3%;
-webkit-box-shadow: 2px 2px 6px 0px rgba(50, 50, 50, 0.75);
-moz-box-shadow: 2px 2px 6px 0px rgba(50, 50, 50, 0.75);
box-shadow: 2px 2px 6px 0px rgba(50, 50, 50, 0.75);
-webkit-border-radius: 5px;
-moz-border-radius: 5px;
border-radius: 5px;
padding: 2em;
text-align:left;
}
Keep in mind : your fiddle doesn't have set width and height to html, body...always declare that, it avoids many messy problems later in DOM - rule of thumb :)
Working fiddle

Answer 3

The source of the problem is indeed the interaction of the baseline alignment between the p and the empty inline box to the left of it.
In addition to using vertical-align: top to fix the problem, you can also use overflow:auto applied to .onethird and .twothird, which triggers a new block formatting context which prevents the text lines from the two inline-block containers from interacting with each other.
See demo at: http://jsfiddle.net/audetwebdesign/6vnh3/