Trying to make separate divs line up at the bottom of the page using CSS

Question

For the site I'm currently making, on the right side is a sidebar with some content that extends to the bottom of the page. To the left is the main content of the site, separated into several bootstrap rows and columns, which also go to the bottom of the page. However, these two sides of the page do not end at the same spot, making it look like this:

I scratched out the name in the picture.

I had a fix in mind, but I wanted to ask here before I can implement it tomorrow morning if it'd work. If I set a specific height for the sidebar on the right, and then set specific heights for the containers on the left that add up to that same height on for the content on the right, would that fix this issue in all browsers? I'm hiding the right side content on mobile and tablets, so it's not an issue there. Any help would be appreciated.

Relevant code below, this is for the sidebar on the right, on the left are several rows and columns using bootstrap.

I've tried several things to fix this, like playing with the spacing, but it's clear that will never work on every browser. Please let me know if you need any more information.

<div class="test-container testimonials hidden-sm hidden-xs">
  <!--Testimonial Container -->
  <h3>Testimonials &amp; Reviews</h3>

  <p class="review">"Sed iaculis et enim at aliquet. Fusce eget lorem vel odio aliquam vulputate ut consectetur nisi. Morbi sagittis quis dolor sagittis posuere. Duis porta tellus luctus diam tristique, in sodales odio pretium. Fusce feugiat, neque fringilla auctor mattis,
    lectus mi condimentum diam, et posuere felis ante ut risus. Quisque eget nisi sed ipsum varius interdum. Cras eget diam volutpat, euismod massa id, lobortis erat. Phasellus venenatis pretium urna vitae tempor. Aliquam pharetra orci id blandit posuere."</p>
  <p class="customer-name">-Name</p>

  <p class="review">"Sed iaculis et enim at aliquet. Fusce eget lorem vel odio aliquam vulputate ut consectetur nisi. Morbi sagittis quis dolor sagittis posuere. Duis porta tellus luctus diam tristique, in sodales odio pretium. Fusce feugiat, neque fringilla auctor mattis,
    lectus mi condimentum diam, et posuere felis ante ut risus. Quisque eget nisi sed ipsum varius interdum. Cras eget diam volutpat, euismod massa id, lobortis erat. Phasellus venenatis pretium urna vitae tempor. Aliquam pharetra orci id blandit posuere."</p>
  <p class="customer-name">-Name</p>

  <p class="review">"Sed iaculis et enim at aliquet. Fusce eget lorem vel odio aliquam vulputate ut consectetur nisi. Morbi sagittis quis dolor sagittis posuere. Duis porta tellus luctus diam tristique, in sodales odio pretium. Fusce feugiat, neque fringilla auctor mattis,
    lectus mi condimentum diam, et posuere felis ante ut risus. Quisque eget nisi sed ipsum varius interdum. Cras eget diam volutpat, euismod massa id, lobortis erat. Phasellus venenatis pretium urna vitae tempor. Aliquam pharetra orci id blandit posuere."</p>
  <p class="customer-name">-Name</p>

  <p class="review">"Sed iaculis et enim at aliquet. Fusce eget lorem vel odio aliquam vulputate ut consectetur nisi. Morbi sagittis quis dolor sagittis posuere. Duis porta tellus luctus diam tristique, in sodales odio pretium. Fusce feugiat, neque fringilla auctor mattis,
    lectus mi condimentum diam, et posuere felis ante ut risus. Quisque eget nisi sed ipsum varius interdum. Cras eget diam volutpat, euismod massa id, lobortis erat. Phasellus venenatis pretium urna vitae tempor. Aliquam pharetra orci id blandit posuere."</p>
  <p class="customer-name">Name</p>

  <p class="review">"Sed iaculis et enim at aliquet. Fusce eget lorem vel odio aliquam vulputate ut consectetur nisi. Morbi sagittis quis dolor sagittis posuere. Duis porta tellus luctus diam tristique, in sodales odio pretium. Fusce feugiat, neque fringilla auctor mattis,
    lectus mi condimentum diam, et posuere felis ante ut risus. Quisque eget nisi sed ipsum varius interdum. Cras eget diam volutpat, euismod massa id, lobortis erat. Phasellus venenatis pretium urna vitae tempor. Aliquam pharetra orci id blandit posuere."
    <p class="customer-name">Name</p>

    <p class="review">"Sed iaculis et enim at aliquet. Fusce eget lorem vel odio aliquam vulputate ut consectetur nisi. Morbi sagittis quis dolor sagittis posuere. Duis porta tellus luctus diam tristique, in sodales odio pretium. Fusce feugiat, neque fringilla auctor mattis,
      lectus mi condimentum diam, et posuere felis ante ut risus. Quisque eget nisi sed ipsum varius interdum. Cras eget diam volutpat, euismod massa id, lobortis erat. Phasellus venenatis pretium urna vitae tempor. Aliquam pharetra orci id blandit posuere."</p>
    <p class="customer-name">-Name</p>
</div>
<!-- End Testimonial Container-->

Answer 1

Did you perhaps want to make something like this? (two div have same height, and will follow the height of the higher div, run the code snippet below) then you can use flex. that if you don't need to support older IE version. if you want to support older IE, then you need to do it via javascript.

.wrapper {
  display: flex;
  width: 100vw;
  font-size: 0;
}

.right-content {
  width: 20%;
  display: inline-block;
  font-size: 16px;
  background-color: green;
}

.left-content {
  width: 80%;
  display: inline-block;
  font-size: 16px;
  vertical-align: top;
  background-color: red;
}

<div class="wrapper">
  <div class="left-content">
    <p>
      Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
    </p>
  </div>
  
  <div class="right-content">
    <div> Name </div>
    <div> Name </div>
    <div> Name </div>
    <div> Name </div>
    <div> Name </div>
    <div> Name </div>
    <div> Name </div>
    <div> Name </div>
    <div> Name </div>
    <div> Name </div>
    <div> Name </div>
    <div> Name </div>
    <div> Name </div>
    <div> Name </div>
    <div> Name </div>
    <div> Name </div>
    <div> Name </div>
    <div> Name </div>
    <div> Name </div>
    <div> Name </div>
    <div> Name </div>
    <div> Name </div>
    <div> Name </div>
    <div> Name </div>
    <div> Name </div>
    <div> Name </div>
    <div> Name </div>
    <div> Name </div>
    <div> Name </div>
  </div>
</div>

Answer 2

Apply a display:flex to the .container

Remove the float property on .test-container

Remove the margin top on .test-container

Take out the red experimental border on .content-container

fiddle is here