How to maintain left column bottom container same size with left column width?

Question

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 position: fixed but not sure why its width doesn't contained within left column.

.left {
  position: relative;
  background-color: yellow;
}

.right {
  background-color: blue;
}

.terms {
  position: fixed;
  bottom: 0;
  left: 0;
}

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.1/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.1/js/bootstrap.min.js"></script>
<div class="row">
  <div class='col-4 left'>
    Left
    <div class="terms">
      <div>Terms and Condition</div>
      <div>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.</div>
    </div>

  </div>
  <div class='col-8 right'>Right</div>
</div>

Answer 1

I removed the position: fixed from your class .terms. The position:fixed will fix the text on your left at a certain position. It would function like a sticky element. I am not quite sure if you need that.

Edit: I assigned a column class to both columns and above that I a also added a position:relative with a height(you can play with the height value so you can get your ideal result) to each one of them. On the left column, on the terms class, I assigned a position: absolute and a bottom:0 pixels, so that it would go on the very bottom.

Moreover, I changed the way you had nested your columns. I added a container on top of the hierarchical DOM and a row above that. Following that row, I also added a col-12, col-sm-12, col-lg-12 so that the column grid can occupy the 100% of its parent container.

If you want to try the snippet I created, try and expanding so you can see the real result. If it is minimized, you will not be able to see it clearly.

My last question is, how you want the mobile view to be ?

Cheers

.left {
  background-color: yellow;
}

.right {
  background-color: blue;
}

.column{
   height: 25vh;
    position: relative;

 }

 .terms{
   position: absolute;
   bottom: 0;
   font-size: 10px;
 }

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.1/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.1/js/bootstrap.min.js"></script>

  <div class="container">
    <div class="row">
      <div class="col-xs-12 col-sm-12 col-lg-12 px-0">
          <div class="col-xs-4 col-sm-4 col-lg-4 left float-left column">
        Left
           <div class="terms">
             <div>Terms and Condition</div>
                <div>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.</div>
           </div>
        </div>
        <div class="col-xs-7 col-sm-8 col-lg-8 right column">Right</div>
      </div>
    </div>
</div>

I have tried the snippet in every device on my Chrome Device Manager, and it works perfectly. Here is an image.