How Do You Anchor Multiple Child Elements to the Bottom of a Parent Element in a Responsive Design?

Question

I have a parent element that has Bootstrap 3's .row CSS class. Within this element are two child elements (each with a Bootstrap column class), one of which has a varying height depending on the data populating it. In the design I'm working with, the elements in this row need to be anchored to the bottom of the parent element.

The kicker (as the title and use of bootstrap suggests) is that this needs to be responsive. Thus absolute positioning of the child elements with bottom: 0px; is not an option.

Here's the current structure of the html:

<div class="row r4">
    <div class="col-md-2">
        <div class="bottom">
            <div data-bind="text: description()"></div>
            <span data-bind="text: metric()"></span>
        </div>
    </div>
    <div class="col-md-8">
        <div class="bottom">
            <div data-bind="foreach: keyLabels()">
                <div class="key-color">
                    <div data-bind="attr: {class: color + ' color-value'}"></div>
                    <div data-bind="text: label"></div>
                </div>
            </div>
        </div>
    </div>
</div>

I've done some research and haven't found a reliable method of solving this using a pure HTML/CSS solution.

I can think of a number of fairly straight-forward (albeit hacky) ways to solve this with JS, but for now I'd like to avoid that with possible.

Any ideas?

Answer 1

Here's a simplified version of your markup that helps more easily reproduce the issue:

<div class="row">
    <div class="col-xs-2 pull-bottom"
         style="height:100px;background:blue">
    </div>
    <div class="col-xs-8 pull-bottom"
         style="height:50px;background:yellow">
    </div>
</div>

So how do we vertically align each column to the bottom? See vertical-align with bootstrap 3:

.pull-bottom {
    display: inline-block;
    vertical-align: bottom;
    float: none;
}

Working Demo in jsFiddle