title: Same height for boxes in both columns
body: <p>I'm trying to create a same-height column which was 2 boxes to the left and 1 box to the right. Something on this line where 01 &amp; 02 combined together has the same height as 03:
  <a href="https://i.stack.imgur.com/4Q9xD.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/4Q9xD.png" alt="enter image description here"></a></p>
  
  <p>Demo: <a href="https://jsfiddle.net/bptdqx67/2/" rel="nofollow noreferrer">https://jsfiddle.net/bptdqx67/2/</a></p>
  
  <p>HTML</p>
  
  <pre><code>&lt;div class="row"&gt;
    &lt;div class="col-7"&gt;
      &lt;div class="h-100"&gt;
        &lt;div class="thankyou__box blue"&gt;
          &lt;div class="thankyou__number"&gt;
            &lt;h4&gt;01&lt;/h4&gt;
          &lt;/div&gt;
          &lt;div class="thankyou__content"&gt;
            &lt;p&gt;This is the first box. This is the first box. This is the first box. This is the first box. This is the first box. This is the first box. This is the first box. &lt;/p&gt;
          &lt;/div&gt;
        &lt;/div&gt;
        &lt;div class="thankyou__box green"&gt;
          &lt;div class="thankyou__number"&gt;
            &lt;h4&gt;02&lt;/h4&gt;
          &lt;/div&gt;
          &lt;div class="thankyou__content"&gt;
          &lt;p&gt;This is the second box. This is the second box. This is the second box. This is the second box. This is the second box. This is the second box. This is the second box. &lt;/p&gt;
          &lt;/div&gt;
        &lt;/div&gt;
      &lt;/div&gt;
    &lt;/div&gt;
    &lt;div class="col-5"&gt;
      &lt;div class="thankyou__box green thankyou__height"&gt;
        &lt;div class="thankyou__number"&gt;
          &lt;h4&gt;03&lt;/h4&gt;
        &lt;/div&gt;
        &lt;div class="thankyou__content"&gt;
          &lt;p&gt;This is the third box. This is the third box. This is the third box. This is the third box. This is the third box.&lt;/p&gt;
        &lt;/div&gt;
      &lt;/div&gt;
    &lt;/div&gt;
  &lt;/div&gt;
  </code></pre>
  
  <p>CSS:</p>
  
  <pre><code>* {
       box-sizing: border-box;
  }
   .row::after {
       content: "";
       clear: both;
       display: table;
  }
   .col {
      /*flex: 0 0 20%;
      */
       width: 20%;
       float: left;
       padding: 1px;
  }
   [class*="col-"] {
       float: left;
       padding-left: 5px;
       padding-right: 5px;
  }
   .col-1 {
       width: 8.33%;
  }
   .col-2 {
       width: 16.66%;
  }
   .col-3 {
       width: 25%;
  }
   .col-4 {
       width: 33.33%;
  }
   .col-5 {
       width: 41.66%;
  }
   .col-6 {
       width: 50%;
  }
   .col-7 {
       width: 58.33%;
  }
   .col-8 {
       width: 66.66%;
  }
   .col-9 {
       width: 75%;
  }
   .col-10 {
       width: 83.33%;
  }
   .col-11 {
       width: 91.66%;
  }
   .col-12 {
       width: 100%;
  }
  .h-100 {
    height: 100%;
  }
  .thankyou__box {
        padding: 15px;
        border-radius: 4px;
        margin-bottom: 10px;
        background-size: 50px;
        background-repeat: no-repeat;
        background-position: 98% 95%;
      }
      .thankyou__box.blue {
        border: 2px solid #c9f5ff;
      }
      .thankyou__box.green {
        border: 2px solid #c6dc9c;
      }
      .thankyou__number {
        width: 33px;
        display: inline-block;
        vertical-align: top;
        float: left;
      }
      .thankyou__content {
        width: calc(90% - 40px);
        display: inline-block;
      }
      .thankyou__content p {
        margin: 0;
      }
      .thankyou__height {
        height: 100%;
        background-size: 100px;
        background-position: 95% 100%;
      }
      .thankyou__height .thankyou__content {
        width: calc(100% - 33px);
      }
  </code></pre>