Bottom aligned container using flexbox causing problem with media screen - css

Question

I have the following...
...and I want to stack the blue container (with box 10 and 20) when outer green container width falls below 500px, like this:
I'm using media screen to do this but the fiddle shows how the stacking doesn't work properly and enters the brown container. The stacking works fine when the blue container is allowed to locate at the top of the green container using a relative position, but it fails when I locate it at the bottom using absolute. Can anyone show me what I'm doing wrong?
#TOTALcontainer {
border: 1px solid green;
position: absolute;
margin: 5px;
}
#outerLHcontainer {
position: relative;
border: 1px solid brown;
margin: 5px;
}
#LHcontainer {
position: relative;
border: 1px solid red;
margin: 30px 0 30px 10px;
margin-right: 12vw;
display: -webkit-box;
display: -moz-box;
display: -ms-flexbox;
display: -webkit-flex;
display: flex;
-webkit-flex-flow: row wrap;
justify-content: space-around;
}
#div1,
#div2,
#div3 {
width: 250px;
height: 10px;
padding: 10px;
border: 1px solid #aaaaaa;
float: left;
clear: left;
margin: 10px;
}
#RHcontainer {
position: relative;
border: 1px solid blue;
margin: 5px;
display: flex;
bottom: 0;
right: 0;
float: right;
}
#div10,
#div20 {
width: 60px;
height: 10px;
margin-right: 30px;
padding: 10px;
border: 1px solid #aaaaaa;
}
#media screen and (min-width: 500px) {
#outerLHcontainer {
width: 50%;
float: left;
}
}
<div id="TOTALcontainer">
<div id="outerLHcontainer">
<div id="LHcontainer">
<div id="div1">1</div>
<div id="div2">2</div>
<div id="div3">3</div>
</div>
</div>
<div id="RHcontainer">
<div id="div10">10</div>
<div id="div20">20</div>
</div>
</div>
http://jsfiddle.net/pb2gckL5/3/

Answer 1

You could go probaly another way to do it. Simply with flexbox:
<div class="container">
<div class="left">
the item of the left <br>left <br>left <br>left <br>left <br>left <br>left <br>left <br>
</div>
<div class="right">
<div class="right-block">
blue block
</div>
</div>
</div>
.container {
width: 100%;
border: 1px solid red;
display: flex;
align-items: flex-end;
}
.left, .right {
flex: 1 0 0;
margin: 5px;
}
.left {
border: 1px solid green;
}
.right {
border: 1px solid blue;
}
#media screen and (max-width: 499px) {
.container {
flex-direction: column;
}
.left, .right {
width: calc(100% - 10px);
}
}
https://codepen.io/priatelko/pen/oNYoKga