<!-- table properties -->
<h3> Using table properties</h3>
<div class="col-wrap">
  <div class="col">
    <h2>Column 1</h2>
    <p>Hello World</p>
  </div>

  <div class="col">
    <h2>Column 2</h2>
    <p>Hello World!</p>
    <p>Hello World!</p>
    <p>Hello World!</p>
    <p>Hello World!</p>
  </div>

  <div class="col">
    <h2>Column 3</h2>
    <p>Some other text..</p>
    <p>Some other text..</p>
  </div>
</div>

<br>
<br>
<br>
<!-- Flexbox -->
<h3> Using Flexbox</h3>
<div class="f-grid">
  <div class="f-grid-col">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Quae, nulla! Assumenda dignissimos harum, molestias iure repudiandae ratione praesentium. Illo facilis et velit ut quam omnis, porro molestiae magni, laboriosam ipsa.
  </div>
  <div class="f-grid-col">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Non, quaerat blanditiis. Eligendi quae tenetur ratione repellendus ut.</div>
  <div class="f-grid-col">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Quae, nulla! Assumenda dignissimos harum, molestias iure repudiandae ratione praesentium. Illo facilis et velit ut quam omnis, porro molestiae magni, laboriosam ipsa.
    Lorem ipsum dolor sit amet, consectetur adipisicing elit. Quae, nulla! Assumenda dignissimos harum, molestias iure repudiandae ratione praesentium. Illo facilis et velit ut quam omnis, porro molestiae magni, laboriosam ipsa.
  </div>
</div>
<br><br><br>

<!--  using css grid</ -->
<h3> Using css grid</h3>
<div class="g-grid">
  <div class="g-grid-col">
    Lorem ipsum dolor sit amet, consectetur adipisicing elit. Quia molestiae iure, a laboriosam facere consequuntur repellendus aspernatur porro ut. Doloremque fugiat saepe maiores.
  </div>
  <div class="g-grid-col">
    Lorem ipsum dolor sit amet, consectetur adipisicing elit. Architecto incidunt, accusantium, cumque obcaecati similique et ducimus inventore fugiat velit exercitationem dolorem iusto porro repellat accusamus quia eum, quos eveniet expedita! Lorem ipsum
    dolor sit amet, consectetur adipisicing elit. Architecto incidunt, accusantium, cumque obcaecati similique et ducimus inventore fugiat velit exercitationem dolorem iusto porro repellat accusamus quia eum, quos eveniet expedita!
  </div>
</div>

<br>
<br>
<br>
/* table properties */

.col-wrap {
  display: table;
  width: 100%;
}

.col {
  display: table-cell;
  padding: 1rem
}

.col:nth-child(even) {
  background-color: orange;
}

.col:nth-child(odd) {
  background-color: yellow;
}

/* flexbox */

.f-grid {
  display: flex;
  justify-content: space-between;
  margin-left: -1rem;
  flex-flow: row wrap;
}

.f-grid-col {
  flex: 1 0;
  background-color: green;
  margin-left: 1rem;
  margin-bottom: 1rem;
  padding: 1rem;
}

/* grid */

.g-grid {
  display: grid;
  /* W(adjusted) = W(individual) - (1rem * 1/2) */
  grid-template-columns: calc(50% - (30px * 1/2)) calc(50% - (30px * 1/2));
  grid-column-gap: 30px;
}

.g-grid-col {
  padding: 30px;
  background-color: red;
  color: #fff;
}

External CSS

This Pen doesn't use any external CSS resources.

External JavaScript

This Pen doesn't use any external JavaScript resources.