HTML/CSS display=table-row alignment - html

Question

I am having trouble getting two components to align in using the <div display='table-cell'>. The first component is being displayed with a gap at the top. I want them to be displayed so that they are aligned.
Here's the JsFiddle: http://jsfiddle.net/66s7x5fr/
Here's the HTML:
<div class="form-group modifierColumn">
<div class="cell">
<select class="form-control input-sm btn-primary">
<option value="Broad">Broad</option>
<option value="Moderate">Moderate</option>
<option value="Single">Single</option>
</select>
</div>
<div class="cell">
<span class="input-group input-group-sm">
<span class="input-group-btn">
<button class="btn btn-primary" type="button"> <i class="fa fa-minus"></i> </button>
</span>
<input class="form-control text-justify" type="text" value="0"> </input>
<span class="input-group-btn">
<button class="btn btn-primary" type="button"> <i class="fa fa-plus"></i> </button>
</span>
</span>
</div>
</div>
Here's the CSS:
.modifierColumn .cell:not(:last-child) {
padding-right: 5px;
}
.cell {
display: table-cell;
}

Answer 1

Similar to nocarrier's response:
.cell {
vertical-align: top;
display: table-cell;
}

Answer 2

Try
.cell {
vertical-align: bottom;
display: table-cell;
}
Somewhat obscure rule. Baffles many. Check Understanding vertical align

Answer 3

Your problem is the the top-padding that the class cell has. Try to use a col-md-x to be more responsive.
<div class="form-group modifierColumn" tabindex="0">
<div class="col-xs-3">
<select class="form-control input-sm btn-primary">
<option value="Broad">Broad</option>
<option value="Moderate">Moderate</option>
<option value="Single">Single</option>
</select>
</div>
<div class="col-xs-4">
<span class="input-group input-group-sm">
<span class="input-group-btn">
<button class="btn btn-primary" type="button"> <i class="fa fa-minus"></i> </button>
</span>
<input class="form-control text-justify" type="text" value="0"> </input>
<span class="input-group-btn">
<button class="btn btn-primary" type="button"> <i class="fa fa-plus"></i> </button>
</span>
</span>
</div>