2 Equal Height Columns - TEXT ONLY

Two equal height column that work using the TABLE method.

by Renzo Calla

HTML

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

      <div class="col">
        <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 -->

</body>

CSS

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: middle;
}

.imgWrap {
  width: 50%;
}

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