CSS Stack divs after Jquery builds them - css

Question

Brief background: I am using Jquery to build Divs if there is information to be built.
I have read a few threads today on stacking Divs, but everything I try just doesn't seem to work.
Given the following Example fiddle (That is what my current solution looks like)
I would like to stack the BAR 2 onto BAR 1, and then BAR 3 onto BAR 2, creating an end result like this:
BAR 3
BAR 2
BAR 1
I know this questions has been asked a lot before, but none of those threads helped me, so I thought I would show my code.
Thanks!

Answer 1

Remove position:absolute from .bar and add some height to it.
Your fiddle updateded: http://jsfiddle.net/4GjrX/1/

Answer 2

HTML
<div class="bars">
<div class="bar-group">
<div class="bar fig2">BAR3</div>
<div class="bar fig1">BAR2</div>
<div class="bar fig0">BAR1</div>
</div>
</div>
CSS
/* Graph Bars */
.bars {
height: 253px;
width: 100%;
}
.bar-group {
height: 100%;
margin: 0 30px;
width: 200px;
}
.bar {
border-radius: 3px 3px 0 0;
cursor: pointer;
height: 0;
text-align: center;
display:inline-block;
width: 150px;
}

Answer 3

/* Graph Bars */
.bars {
position: relative;
width: 100%;
z-index: 10;
}
.bar-group {
float: left;
height: 100%;
margin: 0 30px;
position: relative;
width: 200px;
/* Internet Explorer 10 */
display:-ms-flexbox;
-ms-flex-direction:reverse;
/* Firefox */
display:-moz-box;
-moz-box-direction:reverse;
/* Safari, Opera, and Chrome */
-webkit-box-direction:reverse;
/* W3C */
display:box;
box-direction:reverse;
}
}
.bar {
border-radius: 3px 3px 0 0;
bottom: 0;
cursor: pointer;
height: 0;
position: absolute;
text-align: center;
width: 150px;
}
.bar.fig0 {
left: 0;
}
.bar.fig1 {
left: 52px;
}
.bar.fig2 {
left: 104px;
}