Align Left and Right floats to bottom of Parent div - html

Question

I have an element in an HTML page with child elements
<div id="parent">
<div class="child01"></div>
<div class="child01"></div>
<div class="child02"></div>
</div>
I have an example with current css at http://jsfiddle.net/exu76qnx/
and I would like to know how to have the child divs align to the bottom of the parent div (without using the absolute position answer I've found online and I would like to keep the float attribute if possible)
I've tried using verticle-align: bottom and positioning elements with a table (which worked) however they would not work for dynamically adding more child elements to the parent div

Answer 1

OPTION 1: You could add a wrapper around these these children which is positioned absolutely.
You can then continue to use floats inside that wrapper.
/*APPEARANCE*/
#parent {
width: 80%;
margin: 0 auto;
height: 100px;
background-color: #BBBBBB;
position: relative;
}
.wrapper {
overflow: hidden;
position: absolute;
bottom: 0;
width: 100%;
background: lightblue;
}
.child01 {
width: 70px;
height: 70px;
background-color: #888888;
}
.child02 {
width: 50px;
height: 30px;
background-color: #888888;
}
/*POSITIONING*/
.child01 {
margin-right: 20px;
float: left;
}
.child02 {
float: right;
}
<div id="parent">
<div class="wrapper">
<div class="child01"></div>
<div class="child01"></div>
<div class="child02"></div>
</div>
</div>
OPTION 2: Alternative with Flexbox (still with wrapper)
/*APPEARANCE*/
#parent {
width: 80%;
margin: 0 auto;
height: 100px;
background-color: #BBBBBB;
position: relative;
display: flex;
flex-direction: column;
justify-content: flex-end
}
.wrapper {
overflow: hidden;
/* quick clearfix */
background: lightblue;
}
.child01 {
width: 70px;
height: 70px;
background-color: #888888;
}
.child02 {
width: 50px;
height: 30px;
background-color: #888888;
}
/*POSITIONING*/
.child01 {
margin-right: 20px;
float: left;
}
.child02 {
float: right;
}
<div id="parent">
<div class="wrapper">
<div class="child01"></div>
<div class="child01"></div>
<div class="child02"></div>
</div>
</div>
I'm still getting to grips with flexbox so it's possible this could be improved.

Answer 2

This might be a case of no school like the old school
I've managed to do it with tables which I wanted to avoid (but not as much as absolute positioning)
http://jsfiddle.net/tefz80jq/
<!-- parent is now a table -->
<table id="parent" cellpadding="0" cellspacing="0" border="0">
<!-- table row handles bottom alignment -->
<tr valign="bottom">
I was hoping for a solution similar to this, being able to dynamically add elements that will fall in line with existing positioning