Always keep element ALIGNED TO BOTTOM BASELINE

by lasha

HTML

<div class="outer">
    blah<br>blah<br>blah<br>blah<br>blah<br>blah<br>blah<br>blah<br>blah<br>blah<br>blah<br>blah<br>blah<br>
    <div class="inner">
        <div class="inner-inner">this is bottom aligned because the "blah" content is not floated. natural order. clear-fix doesn't work.</div>
    </div>
</div>

CSS

.outer {
    position: relative;
    width: 300px;
    height: auto;
    /* height: 200px; */
    background: #CCC;
    padding-bottom: 20px;
    box-sizing: border-box;
}

.inner {
    float: right;
    position: relative;
    width: 100px;
    /* height: 100px; */
    background: #eee;
    /* bottom: 0; */
    /* height: 100%; */
    /* padding-bottom: 20px; */
    /* box-sizing: border-box; */
}

.inner-inner {
    position: absolute;
    width: 100%;
    height: 80px;
    bottom: 0;
    background: #FFF;
    font-size: 10px;
}