title: How to push div to the bottom with CSS?
body: <p>I have an HTML defined as follows:</p>
  
  <pre><code>&lt;div id="container" className='row'&gt;
      &lt;div className='col-sm-9 col-md-6 col-lg-8'&gt;
      &lt;/div&gt;
      &lt;div className='col-sm-3 col-md-6 col-lg-4'&gt;
         &lt;button id="bot" /&gt;
      &lt;/div&gt;
  &lt;/div&gt;
  </code></pre>
  
  <p>So, I want the button with the id of <code>bot</code> (or its container div) to be placed at the bottom relative to the container div with the class <code>row</code>. </p>
  
  <p>I tried to do this:</p>
  
  <pre><code>#container
  {
     position: relative;
  }
  
  #bot
  {
     position: absolute;
     bottom: 0;
  }
  </code></pre>
  
  <p>But, this changes the design considerably, as it will push the <code>bot</code> to the left and on top of its sibling div. As you can see I'm using Bootstrap for dividing it into grids. How can I push this button to the bottom with CSS in my case?</p>
  
  <p><a href="https://i.stack.imgur.com/r2tCs.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/r2tCs.png" alt="enter image description here"></a></p>