CSS: Place two blocks stacked next to a vertical rectangle without fixed/absolute positioning?

Question

Here https://jsfiddle.net/w39znn58/ I did a hard sketch with floats and absolute positioning of what I'm trying to achieve with clean and modern CSS using flex-box most likely? Or grid?

div {
  border: 1px solid black;
  padding: 20px;
  width: 80px;
}

.rectangle {
  height: 82px;
  float: left;
}

.square {
  float: left;
}

.square-2 {
  float: none;
  position: absolute;
  top: 70px;
  left: 130px;
}

<div class="rectangle">Rectangle</div>
<div class="square square-1">Square 1</div>
<div class="square square-2">Square 2</div>

I want two blocks, one to stack on top of the other next to a vertical rectangle without fixed/absolute positioning and without adding a div wrapper for .square divs.

Answer 1

You can do it with the Grid:

.grid {
  display: grid;
  grid-template-columns: 1fr 1fr; /* creates two columns, can also use 50% 50%, repeat(2, 1fr) or repeat(2, 50%), fr stands for fractions */
}

.grid > div {
  padding: 20px;
  border: 1px solid;
}

.rectangle {
  grid-row: 1/3; /* spans two rows */
}

<div class="grid">
  <div class="rectangle">Rectangle</div>
  <div class="square square-1">Square 1</div>
  <div class="square square-2">Square 2</div>
</div>

Answer 2

Here is a simple flex solution for this:

* {
 box-sizing:border-box;
}
body {
  display: flex;
  flex-direction: column;
  flex-wrap: wrap;
  /* change the dimension as needed*/
  height: 50vh;
  width:50vw;
  /**/
}

div {
  border: 1px solid black;
  width: 50%;
  text-align:center;
}

.rectangle {
  height: 100%;
}

.square {
  height: 50%;
}

<div class="rectangle">Rectangle</div>
<div class="square square-1">Square 1</div>
<div class="square square-2">Square 2</div>

Answer 3

CSS changes:

div {
border: 1px solid black;
padding: 20px;
width: 80px;
display: grid;
}
.rectangle {
height: 82px;
float: left;
}
.square{
height: 20px;
}    

<div class="rectangle">Rectangle</div>
<div class="square square-1">Square 1</div>
<div class="square square-2">Square 2</div>