title: How to ensure three DIV are the same height regardless of content
body: <pre><code>&lt;div class="section group"&gt;
  &lt;div class="col span_1_of_3 articleTeaserBoxColor"&gt;
      &lt;div class="test2n"&gt;
          &lt;div class="imgHolder"&gt;&lt;img id="NewsArticle_2790_image" class="imgArtThumb" title="" alt="" src="artOne.png" /&gt;&lt;/div&gt;
          &lt;div class="textHolder"&gt;
              &lt;div class="textHolderTop"&gt;&lt;a href="/template.aspx?id=2790" class="" title=""&gt;Care on the Fast Track&lt;/a&gt;&lt;/div&gt;
              &lt;div class="textHolderBottom"&gt;The National Cancer Institute&lt;/div&gt;
          &lt;/div&gt;
      &lt;/div&gt;
  &lt;/div&gt;
  &lt;div class="col span_1_of_3 articleTeaserBoxColor"&gt;
      &lt;div class="test2n"&gt;
          &lt;div class="imgHolder"&gt;&lt;img id="NewsArticle_2792_image" class="imgArtThumb" title=" alt="" src="artThree.png" /&gt;&lt;/div&gt;
          &lt;div class="textHolder"&gt;
              &lt;div class="textHolderTop"&gt;&lt;a href="/template.aspx?id=2792" class="" title=""&gt;Stay Connected&lt;/a&gt;&lt;/div&gt;
              &lt;div class="textHolderBottom"&gt;tool for interacting with your provider and following your healthcare&lt;/div&gt;
          &lt;/div&gt;
      &lt;/div&gt;
  &lt;/div&gt;
  &lt;div class="col span_1_of_3 articleTeaserBoxColor"&gt;
      &lt;div class="test2n"&gt;
          &lt;div class="imgHolder"&gt;&lt;img id="NewsArticle_2791_image" class="imgArtThumb" title="" alt="" src="artTwo.png" /&gt;&lt;/div&gt;
          &lt;div class="textHolder"&gt;
              &lt;div class="textHolderTop"&gt;&lt;a href="/template.aspx?id=2791" class="" title=""&gt;Know When Antibiotics Work and When They Don't&lt;/a&gt;&lt;/div&gt;
              &lt;div class="textHolderBottom"&gt;If you or your child has a virus, antibiotics will not help you or him/her&lt;/div&gt;
          &lt;/div&gt;
      &lt;/div&gt;
  &lt;/div&gt;
  &lt;/div&gt;
  </code></pre>
  
  <p>CSS:</p>
  
  <pre><code>.imgArtThumb
  {
      max-width: 100%;
      height: auto;
  }
  .imgHolder
  {
      float: left;
      display: inline-block;
      width: 43%;
      padding-right: 2%;
      height: 100%;
  }
  .textHolder
  {
      float: left;
      display: inline-block;
      width: 55%;
      height: 100%;
  }
  .textHolderTop
  {
      width: 100%;
      height: 48%;
      text-align: left;
      padding-bottom: 2%;
      overflow: hidden;
  }
  .textHolderBottom
  {
      width: 100%;
      height: 48%;
      overflow: hidden;
      text-align: left;
      padding-bottom: 2%;
  }
  .test2n
  {
      text-align: left;
      height: 95%;
      width: 95%;
      padding: 2%;
      overflow: hidden;
  }
  .articleTeaserBoxColor
  {
      box-shadow: inset 0 -1px 1px rgba(0,0,0,0.5), inset 0 1px 1px rgba(238,146,85,1);
  }
  /*  COLUMN SETUP  */
  .col {
      display: block;
      /*float:left;*/
      display: inline-block;
      margin: 1% 0 1% 0;
  }
  .col:first-child {
      margin-left: 0;
  }
  .span_1_of_3 {
      width: 32.2%;
  }
  /*  GROUPING  */
  .group:before, .group:after {
      content: "";
      display: table;
  }
  .group:after {
      clear: both;
  }
  .group {
      zoom: 1; /* For IE 6/7 */
  }
  /*  SECTIONS  */
  .section {
      clear: both;
      padding: 0px;
      margin: 0px;
      height: auto;
      overflow: auto;
      text-align: center;
      width: 100%;
  }
  </code></pre>
  
  <p>displays this:</p>
  
  <p><img src="https://i.stack.imgur.com/ihAuS.png" alt="enter image description here"></p>
  
  <p>How can I modify my CSS to ensure the three boxes (the one with the box shadow) height matches that of the box with the most text (The middle box should be the same height, but because of content it is shorter).</p>
  
  <p>Any content within a box, which is less than the box with the most text, will have blank space, which is fine.</p>
  
  <p>This is what I would like it to be:</p>
  
  <p><img src="https://i.stack.imgur.com/p0cKr.png" alt="enter image description here"></p>