CSS: How to enlarge a child div of a div and set two images to top and bottom fixed when resize screen

Question

I'm using bootstrap and I have some html like this:

<div class="col-sm-12 mainContainer">
    <div class="col-sm-4 imagesContainer">
        <div class="col-sm-12 firstImage">
            <img src="myimage1.jpg">
        </div>
        <div class="col-sm-12 secondImage">
            <img src="myimage2.jpg">
        </div>
    </div>
    <div class="col-sm-8 textContainer">
        <p>here we have some text</p>
    </div>
</div>

What I would like is to set the "imagesContainer" of the same height of the "textContainer", put the first image on top of "imagesContainer" and second image to bottom of "imagesContainer". So, when resizing, stretching or even putting an enourm amount of text, I'll always have a image on top, one at the bottom, and a lot of white space between those two.

Thank you for your help

Answer 1

Please use the same bootstrap class for the following:

    <div class="col-sm-4 imagesContainer">
    <div class="col-sm-8 textContainer">

After change it will be like:

    <div class="col-sm-8 imagesContainer">
    <div class="col-sm-8 textContainer">

Final solution will be:

<div class="col-sm-12 mainContainer">
  <div class="col-sm-8 imagesContainer">
    <div class="col-sm-12 firstImage">
      <img src="myimage1.jpg">
    </div>
    <div class="col-sm-12 secondImage">
      <img src="myimage2.jpg">
    </div>
  </div>
  <div class="col-sm-8 textContainer">
    <p>here we have some text</p>
  </div>
</div>