Problema con la alineación de div, 3 divs la misma línea horizontalmente

Question

Estoy tratando de mejorar mis habilidades de CSS y estoy teniendo algunos problemas. Quiero alinear 3 divs en la misma fila, comenzando en la parte superior del contenedor Div. Pude alinearlos horizontalmente, pero no se están mostrando en la parte superior. Parece que todos se están alineando con el fondo que no puedo entender. ¿Alguien puede señalarme en la dirección correcta sobre cómo hacer que los Divs no tengan margen y (¿flotación?) En la cima?

Intenté declarar los márgenes pero no tuve mucha suerte. Además, esto va a estar en una vista parcial a través de MVC, por lo que configurar el contenedor en absoluto puede no ser una opción porque su altura desde la parte superior de la página cambiará.

Aquí hay un Jfiddle Y también he adjuntado mi código, tanto HTML como CSS, junto con lo que se está representando en mi navegador.

¡Gracias!

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%;
}

A continuación se muestra lo que se está representando:

Answer 1

Es por sus casillas de verificación. Simplemente póngalos después de los tres Divs de contenido.

<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

Debes tener algo más que pase allí, porque cuando modifiqué tu violín para hacer que los artículos Divs diferentes alturas se alinearan de la manera que parecen querer que lo hagan. Lo que estás describiendo también suena como el comportamiento predeterminado, así que no estoy seguro de por qué los verías todos alineados en el fondo de esa manera. Aquí está el bit que modifiqué, esto fue solo para ver cómo se comportaron:

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

Mira aquí: Violín actualizado