Makes columns same height with one column having nested boxes - html

Question

I'm trying to create 2 columns, one simply filled with text while the other contains three coloured boxes of equal height (33.33%) which then add up to the same height as the text. The overall size of the container can't be a fixed height unfortunately as the site is responsive and the amount of text may change so I need the height of the two columns to be flexible.
Now I've used display: table; and display: table-cell; elsewhere in the site to achieve equal height between just two columns but am struggling to make this one work with the three equally sized boxes within one of the columns.
I've made a JSFiddle to show you what I've got:
http://jsfiddle.net/56yFp/
And here's the 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;
}
Any thoughts SO community? Thanks

Answer 1

DEMO
.column {
display:inline-block
}