<header class="header">Header</header>
<main class="main">Main</main>
<aside class="sidebar">Sidebar</aside>
<footer class="footer">Footer</footer>
body {
  display: flex;
  flex-wrap: wrap;
}
body > * {
  background: #eee;
  padding: 2rem;
  text-align: center;
  border: 5px solid white;
}

.header,
.footer {
  flex: 1 100%;
}
.sidebar {
  flex: 1;
}
.main {
  flex: 2;
}

External CSS

This Pen doesn't use any external CSS resources.

External JavaScript

This Pen doesn't use any external JavaScript resources.

Packages

This Pen doesn't use any packages.