html - ネストされたボックスを持つ 1 つの列で列を同じ高さにします

Question

2 つの列を作成しようとしています。1 つは単純にテキストで埋められ、もう 1 つは同じ高さ (33.33%) の 3 つの色付きのボックスが含まれており、合計するとテキストと同じ高さになります。残念ながら、サイトは応答性が高く、テキストの量が変わる可能性があるため、コンテナーの全体的なサイズを固定の高さにすることはできません。そのため、2 つの列の高さを柔軟にする必要があります。

今私は display: table; を使用しました。および表示: テーブルセル; ちょうど 2 つの列の間で同じ高さを達成するサイトの他の場所ですが、列の 1 つ内の 3 つの同じサイズのボックスでこれを機能させるのに苦労しています。

私が持っているものを示すために JSFiddle を作成しました: http://jsfiddle.net/56yFp/

そして、これがhtmlです：

<div class="column-row">

  <div class="column column-cell column-text">

    <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>

  </div>

  <div class="column column-cell column-boxes">

    <div class="box green-box">Box 1</div>
    <div class="box red-box">Box 2</div>
    <div class="box blue-box">Box 3</div>

  </div>

</div>

CSS:

.page-wrapper {
  background-color: #FFFFFF;
}

/* Table */
.column-table {
  display: table;
}

.column-row {
  display: table-row;
}

.column-cell {
  display: table-cell;
}

.column {
  vertical-align: middle;
  height: 100%;
}

.column-text {
  width: 62.5%;
  background-color: #e2e2e2;
}

.column-boxes {
  width: 37.5%;
}

.box {
  min-height: 33.33%;
  width: 100%;
}

/* Colors */

.green-box {
  background-color: #016354;
}

.red-box {
  background-color: #eb5640;
}

.blue-box {
  background-color: #93ceee;
}

SOコミュニティについて何か考えはありますか？ありがとう