how to get a fragment align to the top in css

Question

I have the following which would reflect ajax results being populated into the bottom:

and am trying to get the .search-bin-top to stay at the top.

#bin_results{
  border: 1px solid red;
  width: 50px;
  margin-left: 10px;
  display: inline-block;
}


.search-bin-top{
  border: 1px solid yellow;
  width: 110px;
  display: inline-block;
  vertical-align: text-top;

}

and would like to have the yellow bordered piece stay at the top. I have a fiddle here: http://jsfiddle.net/e5PDC/

I rarely do CSS so hoping this is an easy fix. Any help is appreciated. I have seen this post Vertical alignment of elements in a div but to be honest, it's a bit beyond me.

Answer 1

Both need to be set to vertically aligned

#bin_results{
  border: 1px solid red;
  width: 50px;
  margin-left: 10px;
  display: inline-block;
  vertical-align:top; /* can set middle too */
}


.search-bin-top{
  border: 1px solid yellow;
  width: 110px;
  display: inline-block;
  vertical-align: top; /* top instead of text-top and can set middle too */
}

You can also set it to middle, i think middle looks good!

Fiddle Demo