CodePen

HTML

            
              <div class="wrapper">

<div class="middle alpha"></div>
<div class="middle beta"></div>
<div class="middle delta"></div>

</div>

<div class="wrapper">

<div class="top alpha"></div>
<div class="top beta"></div>
<div class="top delta"></div>

</div>
            
          
!

↑ Insert the most common viewport meta tag

CSS

            
              body {
    text-align: center;
}

.wrapper {
  width:960px;
  margin:20px auto;
  padding:10px;
  border:1px solid grey;
}

.middle, .top {
    display: inline-block;
    width: 25%;
    zoom: 1;
    *display: inline;
}

.middle {
      background-color: #aaa;
      vertical-align: middle; /* Feel free to change this value, here are your options: baseline | sub | super | top | text-top | middle | bottom | text-bottom | <percentage> | <length> | inherit */
    
    /* Fix for IE7 and below */
}

.top {
      background-color: #bada55;
      vertical-align: top/* Feel free to change this value, here are your options: baseline | sub | super | top | text-top | middle | bottom | text-bottom | <percentage> | <length> | inherit */
    
    /* Fix for IE7 and below */
}
.alpha {
    height: 4.5em;
}
.beta {
    height: 6em;
}
.delta {
    height: 3em;
}
            
          
!
? ?
? ?
Must be a valid URL.
+ add another resource
via CSS Lint

JS

            
              
            
          
!
Must be a valid URL.
+ add another resource
via JS Hint
Loading ..................