Issue with DIV alignment, 3 Divs same line horizontally

Question

I am trying to improve my CSS skills and am having some trouble. I want align 3 DIVs on the same row, starting at the top of the container div. I was able to get them aligned horizontally, but they are not displaying at the top. It seems they are all aligning with the bottom which I can't figure out. Can anybody point me in the right direction as to how to make the divs have no margin and (float?) to the top?

I tried declaring the margins but didn't have much luck. Also, this is going to be in a partial view through MVC so setting the container to absolute may not be an option because it's height from the top of the page will be changing.

Here is a JFIDDLE and I have also attached my code, both HTML and CSS, along with what is being rendered in my browser.

Thanks!

HTML:

<fieldset>
<legend>Items</legend>
 <div class="outercontainer" id="top">
    <div class="containera">
      <div class="group-title">
        <input type="checkbox" runat="server" />
      </div>
        <div class="left item">Left Content</div>
        <div class="center item">Center Content</div>
        <div class="right item">Right Content</div>
    </div>
</div>
<div class="outercontainer" id="bottom">
  <div class="containera">
      <div class="group-title">
        <input type="checkbox" runat="server" />
      </div>
      <div class="left item">Left Content</div>
      <div class="center item">Center Content</div>
      <div class="right item">Right Content</div>
  </div>
</div>
</fieldset>

CSS:

#top {
    border: 3px solid green;
}
#bottom {
    border: 3px solid blue;
}
.item {
    position:relative;
    display: inline-block;
    *display: inline;
    zoom: 1;
    margin:0;
    top:0;
    width: 32%;
    color: white;
}
.left {
    background:red;
}
.right {
    background:blue;
}
.center {
    background:green;
}
    .containera {
    text-align: center;
    white-space: nowrap;
}
    .group-title {
    text-align:center;
    font-weight:bold;
    font-size:larger;
}
.group-title2 {
text-align:center;
width:100%;
}

Below is what is being rendered:

Answer 1

its because of your checkboxes. Just put them after the three content divs.

<div class="containera">

    <div class="left item">Left Content</div>
    <div class="center item">Center Content</div>
    <div class="right item">Right Content</div>
    <div class="group-title">
        <input type="checkbox" runat="server" />
    </div>
</div>

Answer 2

You must have something else going on there, because when I modified your fiddle to make the item divs different heights they lined up the way you seem to want them to. What you're describing also sounds like the default behaviour so I'm not sure why you'd be seeing them all aligned to the bottom like that. Here is the bit that I modified, this was just to see how they behaved:

.left {
    background:red; height:50px;
}
.right {
    background:blue; height:70px;
}
.center {
    background:green; height: 30px;
}

See here: Updated Fiddle