Divs not aligning

I have 3 simple divs with some cosmetic styles that are supposed to be aligned in a row, Two of them have images that are on the left and right sides while middle one contains another div containing text.

I am able to fit the image in divs but the middle one that contains text is not aligning horizontally with other two.

Following is the html

 <div class="eggpic">
    <img src="smiley.gif"/>
 </div>
 <div class="timersection">
   <div class="timersectiontext">Hello</div>
 </div>
 <div class="buttonpic softboil">
   <img src="smiley.gif"/>
  </div>

Here is the jsfiddle link or that http://ift.tt/1Rrx2DY

Please help in aliging all the divs.

Thanks in advance.