how to use only block layout in this css code?

Question

using float and clear properties. Set the dimensions in compliance with the proportions in the figure, but keep in mind that this composition represents the layout of a web page, so blocks should not overlap each other; blocks should occupy the entire width of the page (regardless of screen resolution and browser window size). Place red elements using the margin property. For red elements, adjust the borders and fillets according to your choice. Add text in red blocks, adjust the indentation and horizontal alignment of the text according to your choice. Allow for instances of excess text so that it does not extend beyond the block. Text generation link: Lorem Ipsum.

*, *::before, *::after {
  box-sizing: border-box;
}

html, body {
  width: 100%;
  height: 100%;
  margin: 0;
  padding: 0;
}

body {
  display: flex;
  flex-direction: column;
  font-size: smaller;
}

header {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  height: 4rem;
}

header div:first-child {
  background: purple;
}

header div:last-child {
  background: orange;
}

.content {
  display: flex;
  flex-direction: row;
  flex: 1;
}

nav {
  width: 10rem;
  background: blue;
}

main {
  flex: 1;
  background: yellowgreen;
}

aside {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  width: 10rem;
  gap: 1rem;
  padding: 0.5rem;
  background: yellow;
}

aside > section {
  overflow: hidden;
  display: -webkit-box;
  -webkit-line-clamp: 3; 
  line-clamp: 3;
  -webkit-box-orient: vertical;
}

.red_sjit {
  background-color: rgb(255, 255, 255);
  text-align: center;
  margin: 5px;
  border-top-right-radius: 10px;
  border-bottom-left-radius: 10px;
  position: relative;
  padding: 5px;
  flex: auto; 
  max-height: max-content; 
}

.red_sjit::before {
  content: '';
  position: absolute;
  bottom: 0;
  right: 0;
  width: 100%;
  height: 100%;
  border-top: 2px dashed black;
  border-right: 2px dashed black;
  border-radius: 10px; 
}

.red {
  background-color: red;
  text-align: center;
  margin: 5px;
  border-radius: 10px;
  padding: 5px;
  flex: auto; 
  max-height: max-content; 
}

.red.border {
  border: solid blue 2px; 
}

footer {
  height: 2rem;
  background: pink;
}

<header>
  <div></div>
  <div></div>
</header>
<div class="content">
<nav></nav>
<main></main>
<aside>
  <section class="red_sjit">
  Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
  </section>
  <section class="red border">
  Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
  </section>
</aside>
</div>
<footer></footer>