flexbox-equal-height-columns

by Shridhar Baddur

HTML

<div class="paddingBlock">
    <h1>(EQUAL HEIGHT + WIDTH COLUMNS) + ACTION ICON</h1>
    <div class="eqWrap">
      <div class="asdf">
        <p>HI</p>
      </div>
      <div class="equalHW">
        <p>But I must explain to you how all this mistaken idea of denouncing pleasure and praising pain was born and I will give you a complete account of the system, and expound the actual teachings of the great explorer of the truth, the master-builder
          of human happiness.</p>

        <p>No one rejects, dislikes, or avoids pleasure itself, because it is pleasure, but because those who do not know how to pursue pleasure rationally encounter consequences that are extremely painful. Nor again is there anyone who loves or pursues
          or desires to obtain pain of itself, because it is pain, but because occasionally circumstances occur in which toil and pain can procure him some great pleasure.</p>
      </div>
      <div class="equalHW">
        <p>The European languages are members of the same family. Their separate existence is a myth. For science, music, sport, etc, Europe uses the same vocabulary. The languages only differ in their grammar, their pronunciation and their most common words.</p>
      </div>
      <div class="equalHW">
        <p>A wonderful serenity has taken possession of my entire soul, like these sweet mornings of spring which I enjoy with my whole heart. I am alone, and feel the charm of existence in this spot, which was created for the bliss of souls like mine. I
          am so happy, my dear friend, so absorbed in the exquisite sense of mere tranquil existence, that I neglect my talents.</p>

        <p>I should be incapable of drawing a single stroke at the present moment; and yet I feel that I never was a greater artist than now.</p>

        <p>O my friend -- but it is too much for my strength -- I sink under the weight of the splendour of these visions! A wonderful serenity has taken possession of my entire soul, like these sweet...

CSS

body {
      padding: 0;
      margin: 0;
    }

    .paddingBlock {
      padding: 15px 0;
    }

    .eqWrap {
      display: flex;
    }

    .equalHW {
      flex: 1;
      padding: 15px;
    }

    .equalHW:nth-of-type(odd) {
      background: yellow;
    }

    .equalHW:nth-of-type(even) {
      background: lightblue;
    }

    .asdf {
      flex-basis: 60px;
      background: #333333;
      color: #f7f7f7;
      padding: 15px;
      box-sizing: border-box;
    }