inline-block divs next divs containing images being pushed down [duplicate]

Question

Pleas look at my fiddle:

http://jsfiddle.net/2uJKR/70/

The divs containing text are being pushed down, I want all 4 to be aligned horizontally.

What is missing?

HTML

<div class="bar">
    <div class="element image">
      <img src="http://www.itsalif.info/blogfiles/video-play/vthumb.jpg"/>
    </div>
    <div class="element image">
      <img src="http://www.itsalif.info/blogfiles/video-play/vthumb.jpg"/>
    </div>
    <div class="element">
        TEXT 1
    </div>
    <div class="element ">
        TEXT 2
    </div>
</div>

CSS

.bar {
  position:relative;
  margin:1px auto 1px auto;
  width:425px;
  height:50px;
  border:1px solid red;
}

.element {
  display:inline-block;
  width:100px;
  height:50px;
  border:1px solid blue;
}

.image img {
  display:block;
  margin:0 auto;
  margin-top:10px;
  width:30px;
  height:30px;
}

Answer 1

Add vertical-align:top to your .element class.

.element {
    display:inline-block;
    width:100px;
    height:50px;
    border:1px solid blue;
    vertical-align:top;
}

jsFiddle example

Baseline is the default vertical alignment and you're looking to have them top aligned.