title: How to maintain left column bottom container same size with left column width?
body: <p>I have two columns, left and right column. In my left column, I have a container to be at the bottom. Always at the left bottom position. The width of this container need to be same with the left column width. I used <code>position: fixed</code> but not sure why its width doesn't contained within left column.</p>
  <p><div class="snippet" data-lang="js" data-hide="false" data-console="true" data-babel="false">
  <div class="snippet-code">
  <pre class="snippet-code-css lang-css prettyprint-override"><code>.left {
    position: relative;
    background-color: yellow;
  }
  
  .right {
    background-color: blue;
  }
  
  .terms {
    position: fixed;
    bottom: 0;
    left: 0;
  }</code></pre>
  <pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.1/css/bootstrap.min.css"&gt;
  &lt;script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"&gt;&lt;/script&gt;
  &lt;script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.1/js/bootstrap.min.js"&gt;&lt;/script&gt;
  &lt;div class="row"&gt;
    &lt;div class='col-4 left'&gt;
      Left
      &lt;div class="terms"&gt;
        &lt;div&gt;Terms and Condition&lt;/div&gt;
        &lt;div&gt;This website and the information contained in it are not directed to or intended for distribution or use by any person. The information presented on this website is collected, maintained and provided purely for the convenience of the site visitor/reader.&lt;/div&gt;
      &lt;/div&gt;
  
    &lt;/div&gt;
    &lt;div class='col-8 right'&gt;Right&lt;/div&gt;
  &lt;/div&gt;</code></pre>
  </div>
  </div>
  </p>
  <p><a href="https://i.stack.imgur.com/16SEd.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/16SEd.png" alt="enter image description here" /></a></p>