title: How to align vertically an element to the bottom within a bootstrap column?
body: <p>I'm using twitter-bootstrap framework, and <a href="http://www.virtuosoft.eu/code/bootstrap-touchspin/" rel="nofollow noreferrer">bootstrap touchspin plugin</a>. And I want to align the touchspin at the bottom of an column <code>.col-md-6</code> which has <strong>variable height</strong>.</p>
  
  <p>I tried adding the following (like <a href="https://stackoverflow.com/a/21630490/2154101">this solution</a>):</p>
  
  <pre><code>.row {
      position: relative;
  }
  
  .bootstrap-touchspin {
      position: absolute;
      bottom:0;
      right:0;
  }
  </code></pre>
  
  <p>But nothing changes. (<a href="http://jsfiddle.net/R5n9j/2/embedded/result/" rel="nofollow noreferrer">see jsfiddle</a>)</p>
  
  <p>Why does it not work? Do you have another way to do it?</p>
  
  <p>Here is a jsfiddle where you can try: <strong><a href="http://jsfiddle.net/R5n9j/1/" rel="nofollow noreferrer">http://jsfiddle.net/R5n9j/1/</a></strong></p>
  
  <hr>
  
  <p><strong>ACTUAL OUTPUT</strong></p>
  
  <p><img src="https://i.stack.imgur.com/JHvBh.png" alt="enter image description here"></p>
  
  <p><strong>DESIRED OUTPUT</strong></p>
  
  <p><img src="https://i.stack.imgur.com/oneh1.png" alt="enter image description here"></p>
  
  <hr>
  
  <p><strong>HTML</strong></p>
  
  <pre><code>&lt;div class="container"&gt;
      &lt;div class="row"&gt;
          &lt;div class="col-md-7"&gt;
              &lt;div id="form-guardar-medidas"&gt;
                  &lt;ul class="nav nav-tabs"&gt;
                      &lt;li class="active"&gt;&lt;a href="#tab1" id="add-medida-medir"&gt;Tab1&lt;/a&gt;
  
                      &lt;/li&gt;
                      &lt;li&gt;&lt;a href="#tab2"&gt;Tab2&lt;/a&gt;
  
                      &lt;/li&gt;
                  &lt;/ul&gt;
                  &lt;div id='content' class="tab-content"&gt;
                      &lt;div class="tab-pane active fade in" id="tab1"&gt;
                          &lt;div class="row"&gt;
                              &lt;div class="col-md-6"&gt;
                                  &lt;img class="img-responsive" src="http://placehold.it/200x200"&gt;
                              &lt;/div&gt;
                              &lt;div class="col-md-6"&gt;
                                  &lt;p&gt;Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nam blandit mattis pretium. Interdum et malesuada fames ac ante ipsum primis in faucibus.&lt;/p&gt;
                                  &lt;input id="input-cm" type="text" class="input-lg" name="input-cm"&gt;
                              &lt;/div&gt;
                          &lt;/div&gt;
                      &lt;/div&gt;
                      &lt;div class="tab-pane fade" id="tab2"&gt;Hello tab2&lt;/div&gt;
                  &lt;/div&gt;
              &lt;/div&gt;
          &lt;/div&gt;
      &lt;/div&gt;
  &lt;/div&gt;
  </code></pre>
  
  <p><strong>CSS</strong></p>
  
  <pre><code>body{
      padding: 20px;
  }
  
  .tab-content {
      border: 1px solid #ccc;
      padding: 15px;
  }
  </code></pre>
  
  <p><strong>JS</strong></p>
  
  <pre><code>$(document).ready(function () {
      $("input[name='input-cm']").TouchSpin();
  
      $('.nav-tabs a').click(function (e) {
          e.preventDefault();
          $(this).tab('show');
      });
  
  });
  </code></pre>