<div class="main">
  <div class="app-header">Header</div>
  <div class="app">
    <div class="sidebar-menu">
      <div>Menu item 1</div>
      <div>Menu item 2</div>
      <div>Menu item 3</div>
      <div>Menu item 4</div>
    </div>
    <div class="content">
      Lorem ipsum dolor sit amet consectetur adipisicing elit. Laborum dolores obcaecati quibusdam hic eos quod, praesentium consectetur reprehenderit facere iusto accusamus fugit quidem suscipit facilis voluptatem fuga maiores quo vel?
    </div>
  </div>
</div>
:root {
  font-size: 62.5%;
  body {
    margin: 0;
    // Body font size 16px
    font-size: 1.6rem;
  }
}

.main {
  .app-header {
    // Header font size 24px
    font-size: 2.4rem;
    // Header padding 8px
    padding: 0.8rem;
    background-color: lightblue;
    text-align: center;
  }
  .app {
    display: flex;
    .sidebar-menu {
      // Menu font-size 18px
      font-size: 1.8rem;
      // Menu padding 8px
      padding: 0.8rem;
      width: 20vw;
      background-color: lightgreen;
    }
    .content {
      // Content padding 8px
      padding: 0.8rem;
      background-color: pink;
      width: 80vw;
    }
  }
}
View Compiled

External CSS

This Pen doesn't use any external CSS resources.

External JavaScript

This Pen doesn't use any external JavaScript resources.