title: How to keep responsive images same height?
body: <p>I have a webpage that I'm making, and I have one row with a cover photo and profile picture side-by side. I have them both in a bootstrap row in different-sized grids. But, the profile picture is always extending lower than the cover photo (it's height is larger). How do I keep them responsive, but the same height? My ultimate goal is have them look like a single strip (with padding between), and then stack when window is mobile-sized.</p>
  
  <pre><code>&lt;div class="row"&gt;
                      &lt;div class="col-lg-8"&gt;
                      &lt;img src="http://placehold.it/851x315" class="img-responsive" alt="Cover Photo"&gt;
                      &lt;/div&gt;
                      &lt;div class="col-lg-4"&gt;
                      &lt;img src="http://placehold.it/200x200" class="img-responsive" alt="Profile Picture"&gt;
                      &lt;/div&gt;
                  &lt;/div&gt;
  </code></pre>
  
  <p>I have tried restricting the height of the row div, setting it to a specific height, and switching up the bootstrap grid to be col-md, or col-sm in different proportions. Any wisdom is much appreciated.</p>