Vertical positioning of inline-blocks - html

Question

This question is kind of hard to explain with words, so I will link to a jsFiddle. jsFiddle. If you look at any of the links, you will see some boxes that are at different levels. These are supposed to tile across the screen, kind of like what you can see here. How can I stop them from having the weird vertical spacing above the elements and get them to tile properly? I think that it is caused by each elements contents having different heights, but I don't know how to fix it. Here is the code that you can find in the jsFiddle:
HTML:
<div id="elements">
<div>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec id nunc ut erat facilisis pharetra. Sed egestas gravida mattis.</div>
<div>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nullam eu lectus eu purus pulvinar tincidunt. Phasellus at elit id nulla volutpat gravida sit amet vitae lorem. Nunc mattis venenatis varius. Aenean nec odio lorem. Nulla in turpis sed velit venenatis lacinia eget id ante. Maecenas quis massa nunc.</div>
<div>Lorem ipsum dolor sit amet, consectetur adipiscing elit. </div>
</div>
CSS:
#elements div {
display:inline-block;
width:250px;
height:250px;
border:solid thin #000;
}

Answer 1

Add vertical-align: top; to the CSS rule.

Answer 2

There are lot of techniques to fix this. Either float these elements like-
#elements div {
display:inline-block;
width:250px;
height:250px;
border:solid thin #000;
float:left;
}
or vertical-align: top; buyt as i think in case of inline-block elements flaot one is more robust that'll not last at any breakpoint and also where you haven't applied resets to the body.