HTML5 CSS Equal Height Columns Not Working With Images [Table/Table Cell Method]

I'm trying to figure out how to make equal column heights using HTML and CSS only. The method i'm trying to use is the setting the containing element to display table and the colum

Solution 1:

Used vertical-align:top for align element on top of div

main {
  background-color: aquamarine;
  margin: 0 auto;
  width: 60%;
  padding: 1em;
}

#colWrap {
  display: table;
  width: 100%;
  background-color: beige;
}

.col {
  display: table-cell;
  width: 25%;
  background-color: brown;
  border: 1px solid white;
  padding: 0;
  vertical-align:top; 
}

.imgWrap {
  width: 50%;
}

img {
  width: 100%;
  height: auto;
}

<main>
  <div id="colWrap">
    <div class="col">
      <p>This is a column of text</p>
    </div>
    <!-- close div class col -->

    <div class="col">
      <img src="https://imageshack.com/i/povCNXlyj"/>
      <p>This is a column of text</p>
      <p>This column is longer than the other</p>
    </div>
    <!-- close div class col -->

  </div>
  <!-- close id colWrap -->

</main>
<!--close main content -->

Solution 2:

you can use in .col class vertical-align: middle;

Solution 3:

fiddle Add a vertical align middle to your table-cell element that will ensure your image is aligned

vertical-align: middle;