HTML/CSS 'インラインブロック'要素を並べて整列する際の問題

Question

下のリンクで作成したコードページをご覧ください。コードも以下にあります。

http://codepen.io/cjpicc11/pen/xRWvaR/

あなたはそのブロック1に気づくと2がメインのコンテナ要素の先頭に適切に揃えされていないと、私はその理由を把握することはできませんブロックします。私は両方のブロックをインラインブロックとして並べて並べるように設定する必要があると思っていた。

ご協力いただければ幸いです。

コードHTML

 <div class="MainContainer"> 
     <div class="MainContentContainer"> 
     <div id="ValuesBlock"> 
      <h1 class="BlockHeader"> 
       Block 1 
      </h1> 
      <h2>What is Lorem Ipsum?</h2> 
      <h3>Lorem Ipsum is simply dummy text of the printing and typesetting industry.</h3> 
      <div class="Spacer"> 
       &nbsp; 
      </div> 
      <h2>Where does it come from?</h2> 
      <h3>Contrary to popular belief, Lorem Ipsum is not simply random text. It has roots in a piece of classical Latin literature from 45 BC, making it over 2000 years old.</h3> 
      <div class="Spacer"> 
       &nbsp; 
      </div> 
      <h2>Where can I get some?</h2> 
      <h3>There are many variations of passages of Lorem Ipsum available, but the majority have suffered alteration in some form, by injected humour.</h3> 
     </div> 
     <div id="UpcomingEventsBlock"> 
      <h1 class="BlockHeader"> 
       Block 2 
      </h1> 
      <p>It is a long established fact that a reader will be distracted by the </p><br> 

     </div> 
     </div> 
    </div> 

コードCSS

.MainContentContainer{ 
    position:relative; 
    display:block; 
    /*background-color:#F0F0F0;*/ 
    background-color:#FFF; 
    height:80%; 
    width:80%; 
    border-radius: 3px; 
    box-shadow: 0px 7px 45px #888888; 
    margin: 0 auto; 
    border-style: solid 2px; 
    padding:45px; 
    color:#484848; 
} 
#ValuesBlock{ 
    position:relative; 
    display:inline-block; 
    background-color:#FFF; 
    margin-left:3px; 
    border-radius: 7px; 
    box-shadow: 0px 7px 45px #888888; 
    width:60%; 
    padding:10px; 
} 
h1.BlockHeader { 
    position: relative; 
    display: block; 
    background-color: #103B58; 
    text-align: center; 
    color: #FFF; 
    width: initial; 
    /* margin: 0 auto; */ 
    /* padding: 5px 5px 5px 5px; */ 
    /* margin: -9px 10px 36px 1px; */ 
    border-radius: 7px 7px 0 0; 
    /* margin: -10px -5px -5px -5px; */ 
    margin-top: -10px; 
    margin-left: -10px; 
    margin-right: -10px; 
    padding-right: 0px; 
    height: 32px; 
    padding: 21px; 
    } 
    #UpcomingEventsBlock{ 
    position:relative; 
    display:inline-block; 
    background-color:#FFF; 
    margin-left:0px; 
    border-radius: 7px; 
    box-shadow: 0px 7px 45px #888888; 
    width:30%; 
    padding:10px; 
    } 
.footer{ 
    position: relative; 
    bottom: 0; 
    width: 100%; 
    padding: 25px; 
    text-align:center; 
    font-size: 0.8em; 
    font-style: italic; 
} 

Answer 1

この作品：

vertical-align: top;