Align Divs at Top and create space between Divs - html

Question

How do I align my three divs to be at the top?
- See how Google Mail and Google Maps dropdown since they have less content? I'd like them to be aligned at the top no matter how little text is below them
Also, I have three divs at 33.3333%.
- If I wanted to put more space inbetween the divs (say like 5px, how would I do that?
Here's my Jsfiddle: http://jsfiddle.net/huskydawgs/Z7dZR/
Here's my code:
<div id="wrapper-threecol">
<div id="threecol_row">
<div class="threecol_cell1">
<p class="summary-headline">Google Mail</p>
<p class="summary-description">Gmail's inbox helps you stay organized by sorting your mail by type. Plus, you cannot work correctly.</p>
</div>
<div class="threecol_cell2">
<p class="summary-headline">Google</p>
<p class="summary-description">Search the world's information, including webpages, images, videos and more. Google has many special features to help you find exactly what you're looking for.</p>
</div>
<div class="threecol_cell3">
<p class="summary-headline">Google Maps</p>
<p class="summary-description">Find local businesses, view maps and get driving directions in Google Maps.</p>
</div>
</div>
</div>
Here's my CSS:
#wrapper-threecol {
position:relative;
width:100%;
border: none;
margin: 20px 0 0 0;
}
#threecol_row {
height:100%;
white-space:nowrap;
}
.threecol_cell1, .threecol_cell2, .threecol_cell3 {
height:100%;
width:33.3333%;
display:inline-block;
white-space:normal;
}
.summary-headline {
color: #232323;
font-family: 'SegoeRegular', Helvetica, Arial, sans-serif;
font-size: 20px;
line-height: 24px;
margin:0;
text-align: center;
}
.summary-description {
color: #232323;
font-family: 'SegoeRegular', Helvetica, Arial, sans-serif;
font-size: 13px;
line-height: 23px;
margin: 0;
text-align: center;
}

Answer 1

I put 5% spacing
http://jsfiddle.net/Z7dZR/1/
.threecol_cell1, .threecol_cell2, .threecol_cell3 {
height:100%;
width:30%;
display:inline-block;
white-space:normal;
vertical-align: top;
margin-left: 5%;
}
.threecol_cell1{
margin-left: 0;
}
You need to vertically align the inline-block elements to the top vertical-align: top;
For spacing, I made your blocks width 30%, which means you have 10% left of the 100%. So I set 5% to margin left for each block then set the first block margin-left to 0 so you have a perfect 100%. Since you have width in %, it would be wise to set the margin in % as well

Answer 2

.threecol_cell1, .threecol_cell2, .threecol_cell3 {
vertical-align: top;
}
that should do it.