css,inline-block

簡単な方法(inline-blockを使用)
同様の事を、displayプロパティの値をinline-blockにすることで実現できる。
.box2 {
  display: inline-block;
  width: 200px;
  height: 100px;
  margin: 1em;
}

CSSレイアウトを学ぶ
http://ja.learnlayout.com/inline-block.html





CSSのみで横並びの要素の高さを揃える | HTML・CSS・JavaScriptのテクニック集 | Webサイト制作支援 | ShanaBrian Website
JavaScriptを使わずCSSのみで横並びの要素の高さを揃えるには、以下の方法で可能です。
フレキシブル・レイアウトを使用する
最大の行数を固定とする
table-cellを使用する
inline-blockを使用する
ネガティブmarginを使用する
フレキシブル・レイアウトを使用する
フレキシブル・レイアウトを使用します。
この指定が一番楽で柔軟な実装方法ですが、古いバージョンのブラウザの一部が対応していませんので注意が必要です。
※ 対応ブラウザは以下を参照
フレキシブル・レイアウトの基本
【HTML】

   

テスト

   

テストテストテストテストテストテストテストテスト

   

テストテストテストテスト

   

テストテスト

   

テスト

   

テストテストテストテストテストテストテスト

   

テストテストテストテスト

   

テストテスト

【CSS】
ul.sample {
    margin:0 0 10px;
    display:-webkit-box;
    display:-moz-box;
    display:-ms-box;
    display:-webkit-flexbox;
    display:-moz-flexbox;
    display:-ms-flexbox;
    display:-webkit-flex;
    display:-moz-flex;
    display:-ms-flex;
    display:flex;
    -webkit-box-lines:multiple;
    -moz-box-lines:multiple;
    -webkit-flex-wrap:wrap;
    -moz-flex-wrap:wrap;
    -ms-flex-wrap:wrap;
    flex-wrap:wrap;
    width:396px;
}

ul.sample li {
    margin:0 10px 10px 0;
    padding:10px;
    border:1px solid #aaa;
    width:100px;
    background-color:#ddd;
    list-style:none;
}

ShanaBrian Website
http://shanabrian.com/web/html-css-js-technics/css-equal-height.php