Position buttons at the bottom of a div

Question

I have 2 divs that are side-by-side, where the div on the left is a lot taller than the one on the right (see on CodePen):

<div class="drawer-top form-group form-group-lg clearfix">
  <div class="col-sm-12 no-pad">
    <button type="button" class="btn form-control input-lg btn-info btn-lg edit-columns">
      Edit Columns <i class="fa-pencil"></i>
      <span><i class="fa fa-times"></i></span>
    </button>
  </div>
</div>
<div class="drawer">
  <div class="refine-search">
    <div class="facet-container">
      <div class="col-sm-4">
        <label><input type="checkbox" checked/> Option 1</label>
        <label><input type="checkbox"/> Option 2</label>
        <label><input type="checkbox"/> Option 3</label>
        <label><input type="checkbox"/> Option 4</label>
        <label><input type="checkbox"/> Option 5</label>
        <label><input type="checkbox"/> Option 6</label>
        <label><input type="checkbox"/> Option 7</label>
        <label><input type="checkbox"/> Option 8</label>
        <label><input type="checkbox"/> Option 9</label>
        <label><input type="checkbox"/> Option 10</label>
        <label><input type="checkbox"/> Option 11</label>
        <label><input type="checkbox"/> Option 12</label>
        <label><input type="checkbox"/> Option 13</label>
        <label><input type="checkbox"/> Option 14</label>
        <label><input type="checkbox"/> Option 15</label>
        <label><input type="checkbox"/> Option 16</label>
        <label><input type="checkbox"/> Option 17</label>
        <label><input type="checkbox"/> Option 18</label>
      </div>
      <div class="col-sm-8">
        <button type="button" class="btn form-control input-lg btn-info btn-lg save-columns">+ Save Column View</button>
        <hr/>
        <em>My Column Views</em>
        <span style="float: right">edit</span>
        <hr/>
        <div class="refine-buttons form-group form-group-lg clearfix">
          <div class="col-sm-6 no-pad reset-button">
            <button type="button" class="btn form-control input-lg btn-lg btn-info columns-reset">
              Reset
            </button>
          </div>
          <div class="col-sm-6 no-pad apply-button">
            <button disabled type="submit" class="btn form-control input-lg btn-lg btn-primary">Apply</button>
          </div>
        </div>
      </div>
    </div>
  </div>
</div>

I want the reset and apply buttons on the right to be at the bottom, however long the left div might be. I have tried to achieve this by using relative and absolute positioning, but its not working. What am I doing wrong?

.refine-buttons {
  position: relative;
}

.reset-button {
  position: absolute;
  bottom: 0;
  left: 0;
}

.apply-button {
  position: absolute;
  bottom: 0;
  right: 0;
  }

Answer 1

Here's a way to do it but you have to use JavaScript/jQuery.

This is the entire CSS:

label {
  display: block;
  padding-left: 15px;
  text-indent: -15px;
}

.refine-buttons {
  position: absolute;
  width:95%;
  bottom: 0px;
}

.col-sm-8 {
  position:relative;
  display:block;
}

And this is the jQuery:

$(document).ready(function(){
  var elemH = $(".col-sm-4").css("height");
  $(".col-sm-8").css("height",elemH);
});

You need this to set the height of the col-sm-8 element to the height of it's precedent sibling (col-sm-4) without this the height of the first element will be smaller from that of the second since it contains a lot less content.

Here's an updated codepen: http://codepen.io/anon/pen/JoNgjR

Hope I could help

Answer 2

Your parent container have to clear the inner floating elements..

try something like:

.facet-container:after {
    content: '';
    display: table;
    clear: both;
}

After clearing the floating character, the parent element is as high as the highest child element - the absolute position is in this way working!