How can I reproduce this with CSS?

Question

I am being asked to generate html that looks like the mock up image below. I have some sample HTML and CSS that generate a grid of squares etc. I need to be able convert this grid to look like the mock up image attached below. Preferably would like to use CSS only but I am not limited to using only CSS. My snippet doesn't uses bootstrap but I have access to Bootstrap 4.

* {box-sizing: border-box;}
.wrapper {
    border: 2px solid #f76707;
    border-radius: 5px;
    background-color: #fff4e6;
}

.wrapper > div {
    border: 2px solid #ffa94d;
    border-radius: 5px;
    background-color: #ffd8a8;
    padding: 1em;
    color: #d9480f;
}
.wrapper div:nth-child(1) {
  grid-column: 1/1;
  grid-row: 1/5;
}
.wrapper div:nth-child(2) {
  grid-column: 2/4;
  grid-row: 1/3;
}
.wrapper div:nth-child(3) {
  grid-column: 2/2;
  grid-row: 3/5;
}
.wrapper div:nth-child(4) {
  grid-column: 3/3;
  grid-row: 3/5;
}


.wrapper {
  display: grid;
  grid-template-columns: repeat(2,4); 
  grid-auto-rows: 100px;
  grid-auto-flow: dense;
}

<div class="wrapper">
   <div>One</div>
   <div>Two</div>
   <div>Three</div>
   <div>Four</div>
</div>

My solution is close but the second row and third column doesn't match.

Answer 1

This can be done easily with the Bootstrap 4 grid system. The red border is for visualisation. From here you can add the correct padding/margin to the column contents.

<div class="container">
    <div class="row">
        <div class="col-3 red-border">

            Block 1

        </div>
        <div class="col">

            <div class="row">
                <div class="col red-border">

                    Block 2

                </div>
            </div>
            <div class="row">
                <div class="col-4 red-border">

                    Block 3

                </div>
                <div class="col red-border">

                    Block 4

                </div>
            </div>

        </div>
    </div>
</div>

<style>
    .red-border {
        border: 1px solid red;
    }
</style>