html - CSS diaplay inline-block top aligment -

i have few divs want display separate boxes in 2 columns.

html:

<div class="short-desk">    <p>box 1</p> </div>  <div class="short-desk">    <p>box 2</p> </div> ...

css:

.short-desk {     display: inline-block;     width: 42%;     height: 180px;     border:1px solid #000; }

result:

enter image description here

i tried use css diaplay:inline-block property, there problem alignment: 2 boxes in 1 row not on same level.

actually working ok small text inside, but, when put little bit longer text, level changes , doesn't match each other.

see demo here:

http://jsfiddle.net/zur4ik/tugup/1/

how can fix this?

actually, inadvertently placed solution in question title.

adding style definition seems give intended behaviour:

.short-desk {     vertical-align:top; }

if isn't looking for, let me know , i'll happy further!

Live