title: How to keep two columns the same height with image?
body: <p>We have a two column layout where image is on one side with text on the other. We want the image to be the same height as the content. We are having an issue when the text column reaches a certain height, then it will not make the image go full height. Although not added, this <code>.flex__wrapper</code> is surrounded by an outer <code>&lt;div class="container"&gt;</code> element so that we can handle larger screens where we may want to limit the width. </p>
  
  <p>How can we achieve this? Our current solution uses <code>flexbox</code>, but we have also tried the following solutions but none resolves the problem. </p>
  
  <p>Goal:</p>
  
  <ul>
  <li>As the right column containing the text increases in height, i want the image to also take up the same amount of height. </li>
  </ul>
  
  <p>Solutions we tried, but they didn't work. They seem to work well with text and text, but not text and image.</p>
  
  <ol>
  <li><a href="https://stackoverflow.com/questions/12375692/make-two-columns-the-same-height">Make two columns the same height (using Flexbox)</a></li>
  <li><a href="https://stackoverflow.com/questions/26733882/keep-columns-with-same-height">Keep columns with same height
  (using Tables)</a></li>
  </ol>
  
  <p><div class="snippet" data-lang="js" data-hide="false" data-console="true" data-babel="false">
  <div class="snippet-code">
  <pre class="snippet-code-css lang-css prettyprint-override"><code>.flex__wrapper {
   display: flex;
   position: relative;
   align-items: center;
   background-color: #eee;
  }
  
  [class*=col--] {
   box-sizing: border-box;
  }
  
  .col--m-s-12 {
  width: 100%;
  }
  
  .col--t-s-6 {
  width: 50%; 
  }
  
  img {
  display: block;
  height: auto;
  }</code></pre>
  <pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;div class="flex__wrapper"&gt;
    &lt;div class="col--m-s-12 col--t-s-6"&gt;
      &lt;img src="https://thumb1.shutterstock.com/display_pic_with_logo/422872/1024946740/stock-photo-large-group-of-business-people-standing-with-folded-hands-togeth-1024946740.jpg"&gt;
    &lt;/div&gt;
    &lt;div class="col--m-s-12 col--t-s-6"&gt;
      &lt;div&gt;Distinctively engineer timely benefits before leading-edge technology. &lt;/div&gt;
      &lt;div&gt;Quickly brand strategic web-readiness whereas global relationships. Credibly underwhelm interdependent e-markets via plug-and-play value. Professionally maximize emerging partnerships rather than equity invested information. Objectively morph intuitive applications rather than multimedia based best practices. Competently innovate covalent infrastructures after premium relationships.
  
  Globally conceptualize holistic sources and leveraged synergy. Distinctively maintain stand-alone content without market-driven niche markets. Completely orchestrate seamless channels after high-quality synergy. Rapidiously scale cutting-edge niche markets with reliable innovation. Intrinsicly productize multifunctional manufactured products without high standards in e-tailers.&lt;/div&gt;
    &lt;/div&gt;
  &lt;/div&gt;</code></pre>
  </div>
  </div>
  </p>
  
  <p>Current issue:
  <a href="https://i.stack.imgur.com/ZjmbE.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/ZjmbE.png" alt="current issue"></a></p>
  
  <p>Additional issue: 
  <a href="https://i.stack.imgur.com/I5QHP.jpg" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/I5QHP.jpg" alt="additional issue"></a></p>
  
  <p>Desired result:
  <a href="https://i.stack.imgur.com/9cw3Y.jpg" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/9cw3Y.jpg" alt="enter image description here"></a></p>