Same height for boxes in both columns - html

Question

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 & 02 combined together has the same height as 03:
Demo: https://jsfiddle.net/bptdqx67/2/
HTML
<div class="row">
<div class="col-7">
<div class="h-100">
<div class="thankyou__box blue">
<div class="thankyou__number">
<h4>01</h4>
</div>
<div class="thankyou__content">
<p>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. </p>
</div>
</div>
<div class="thankyou__box green">
<div class="thankyou__number">
<h4>02</h4>
</div>
<div class="thankyou__content">
<p>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. </p>
</div>
</div>
</div>
</div>
<div class="col-5">
<div class="thankyou__box green thankyou__height">
<div class="thankyou__number">
<h4>03</h4>
</div>
<div class="thankyou__content">
<p>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.</p>
</div>
</div>
</div>
</div>
CSS:
* {
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);
}

Answer 1

Adding display:flex to .row would solve this problem.

Answer 2

Using Grid will greatly simplify your layout rules. Here is a straightforward approach with no dependencies. Once we declare the parent as a grid container, we can create rules for how the children behave.
.right {
grid-column: 2; /* begin at column two */
grid-row: 1 / 3; /* span from the first grid line to the third */
}
With this in place the right column's height will always be the sum of the children in the first column.
.grid {
display: grid;
grid-template-columns: 50% 50%;
grid-template-rows: auto auto;
grid-gap: 2px;
}
.right {
grid-column: 2;
grid-row: 1 / 3;
background-color: red;
}
.grid * {
padding: 1em;
}
.grid *:not(.right) {
background-color: #ccc;
}
<div class="grid">
<div class="top">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Quis nemo doloremque tempora porro quos natus odio est tenetur facilis commodi voluptatum reprehenderit, in, consequatur pariatur. Voluptatum quam, modi sit. Eos. lorem</div>
<div class="btm">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Cum ut maiores perspiciatis temporibus quae magni enim quas rerum deserunt expedita voluptas deleniti, labore dolore possimus quis officiis ducimus vel repellat.</div>
<div class="right"></div>
</div>
jsFiddle

Answer 3

* {
margin: 0;
padding: 0;
box-sizing: border-box;
}
.container {
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
max-width: 500px;
width: 100%;
}
.container__inner {
display: flex;
}
.container__col:nth-child(1) {
width: 60%;
margin-right: 30px;
}
.container__col:nth-child(1) .container__item {
height: 100px;
}
.container__col:nth-child(2) {
width: 40%;
}
.container__col:nth-child(2) .container__item {
height: 100%;
}
.container__item {
display: block;
border-radius: 4px;
border: 2px solid green;
margin-bottom: 30px;
width: 100%;
}
.container__item:last-of-type {
margin-bottom: 0;
}
<div class="container">
<div class="container__inner">
<div class="container__col">
<div class="container__item"></div>
<div class="container__item"></div>
</div>
<div class="container__col">
<div class="container__item"></div>
</div>
</div>
</div>