Bootsrap Fixed & Resppnsive div height

Question

I would like to have a fixed responsive div height. Here is the example:

<div class="col-md-12">
   <div class="col-md-8"> //here there is an Image with 800px height </div>
   <div class="col-md-4" style="background:#eee">
       <div class="col-md-12" style="background:black"> 
          //here there is text and height = 350px height 
       </div>     
   </div>
</div>

I would like to fix the height of my black div as the height of my image. Also i would like to make it responsive..

Answer 1

Use flex.

align-items: stretch; stretch items to its parent height and flex-wrap: wrap make it wrap.

See preview in codepen: Preview