TryIt Editor v2.0 - Example of using rem for the font-size

Source Code: (back to article)

<!DOCTYPE html>
<html>
  <head>
    <title>Title of the document</title>
    <style>
      :root {
        font-size: 62.5%;
      }
      body {
        margin: 0;
        font-size: 1.6rem;
      }
      .header {
        font-size: 2.4rem;
        padding: 0.8rem;
        background-color: lightgreen;
        text-align: center;
      }
      .flex {
        display: flex;
      }
      .sidebar-left {
        font-size: 1.8rem;
        padding: 0.8rem;
        width: 20vw;
        background-color: pink;
      }
      .content-right {
        padding: 0.8rem;
        background-color: lightblue;
        width: 80vw;
      }
    </style>
  </head>
  <body>
    <div class="main">
      <div class="header">Lorem Ipsum</div>
      <div class="flex">
        <div class="sidebar-left">
          <div>First item</div>
          <div>Second item</div>
          <div>Third item</div>
          <div>Fourth item</div>
        </div>
        <div class="content-right">
          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>
  </body>
</html>