inline-block и vertical-align

$('a').click(function(){$('.main > div').css("vertical-align",$(this).data("align"))})

div 
{ 
    display:inline-block; 
    border:1px solid red; 
    padding:5px; 
} 
div.main 
{ 
    padding:10px; 
} 
.first 
{ 
    width:100px; 
    height:100px; 
} 
.second 
{ 
    width:100px; 
    height:100px; 
} 
.third 
{ 
    width:110px; 
    height:50px; 
} 
.four 
{ 
    width:110px; 
    height:50px; 
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
<div class="main"> 
Hello world! 
  <div class="first">Hello world 1! Hello world 1! Hello world 1!</div> 
  <div class="second">Hello world 2!</div> 
  <div class="third">Hello world 3!</div> 
  <div class="four"></div> 
</div> 
 
 
<a href="javascript:;" data-align="baseline">baseline</a> 
<a href="javascript:;" data-align="top">top</a> 
<a href="javascript:;" data-align="bottom">bottom</a> 
<a href="javascript:;" data-align="middle">middle</a>