html - How do I align div elements where some have text and some don't? -

i trying have series of inline-block div elements inside parent block div element sit @ same height. of divs have text in them , others not. text in divs needs vertically centered not horizontally. used line-height center text, div no text not align others. here code:

<div class='line'>         <div class='sometext'>text 1</div>         <div class='sometext'>text 2</div>         <div class='notext'></div>         <div class='sometext'>text 3</div>         <div class='sometext'>text 4</div> </div>   .line{     display: block;     height: 50px;     max-height: 50px; }  .sometext{     display: inline-block;     line-height: 50px;     background-color: red;     padding: 10px; }  .notext {     display: inline-block;     height: 50px;     width:50px;     background-color: blue;     padding: 10px; } 

could explain me why happening and/or give possible solution? avoid using tables if possible.

thanks!

also here jsfiddle showing problem. https://jsfiddle.net/n1lbclr1/

i found answer here: why setting line-height 1 of 2 inline-block sibling divs effect both divs?

you can add vertical-align: top; divs text.

blue div positioned @ text baseline. if change vertical-align top position correctly.