How to implement such a solution?

Question

Layout

Help me make it like in the picture:

Pictures

All wrapped up in code like this:

<header>
        <div class="logo"></div>
        <div class="container">
            <div class="col-6">
                Content
            </div>
            <div class="col-6">
                Content
            </div>
        </div>
        <div class="info"></div>
    </header>

Answer 1

https://codepen.io/sharomet/pen/KKdoygE

<div class="wrapper">
  <div class="item1"></div>
  <div class="item2"></div>
  <div class="item3"></div>
</div>

.wrapper {
  display: grid;
  grid-template-rows: 1fr 200px;
  grid-template-columns: 1fr 1fr;
  height: 100%;
}
.item1 {
  background-color: red;
}
.item2 {
  background-color: blue;
  grid-column: 2 / 2;
  grid-row: 1 / 4;
}
.item3 {
  background-color: green;
}