Div structure with percent height - html

Question

I'm trying to build certain structure on page.
Main div (.row) with 400px height, two child divs (columns col-md-6), and five inner divs: two with 50% of parent height, three with 33% of parent height. And I don't get how to implement this. Could you recommend the best solution?
P.S. I'm using bootstrap3.
UPDATE: Added code.
<div class="row">
<div class="col-md-6">
<div id="ember828" class="ember-view bar-category-box">
</div>
<div id="ember829" class="ember-view bar-category-box">
</div>
</div>
<div class="col-md-6">
<div id="ember830" class="ember-view bar-category-box">
</div>
<div id="ember831" class="ember-view bar-category-box">
</div>
<div id="ember832" class="ember-view bar-category-box">
</div>
</div>
</div>

Answer 1

Since the .row is fixed at 400px height, you can give whats inside the same height:
.row > .col-md-6 {
height: 100%;
}
then for each div inside .col-md-6 you give the height you need:
.row > .col-md-6 .half {
height: 50%;
}
.row > .col-md-6 .third {
height: 33.33%;
}
This should work.
And even if the parent .row div height changed the inside should adapt.

Answer 2

You can do this with Flexbox, or with combination of bootstrap and flexbox DEMO
body, html {
margin: 0;
padding: 0;
}
.container {
height: 400px;
width: 100%;
box-sizing: border-box;
display: flex;
border: 1px solid #73FCD6;
padding: 10px;
}
.left, .right {
display: flex;
flex-direction: column;
flex: 1;
}
.box {
border: 1px solid #965504;
flex: 1;
margin: 5px;
display: flex;
align-items: center;
justify-content: center;
}
<div class="container">
<div class="left">
<div class="box">Content</div>
<div class="box">Content</div>
</div>
<div class="right">
<div class="box">Content</div>
<div class="box">Content</div>
<div class="box">Content</div>
</div>
</div>