Untitled

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Document</title>
  </head>
  <style>
    * {
      box-sizing: border-box;
      padding: 0;
      margin: 0;
    }
    #main {
      display: flex;
      flex-direction: row;
      border-top: 1px solid #000;
    }
    #nav {
      font-size: 1rem;
      padding: 0 1rem;
    }
    #nav li {
      list-style-type: none;
      padding-top: 10px;
    }
    #article {
      border-left: 1px solid #000;
      padding: 1rem;
    }
    #aside {
      border-left: 1px solid black;
      padding: 1rem;
    }
    #header {
      margin-bottom: 1rem;
    }
    #footer {
      border-top: 1px solid black;
      text-align: center;
    }
    @media (max-width: 600px) {
      #main {
        flex-direction: column;
      }
      #main #article {
        border-left: none;
        border-top: 1px solid black;
      }
      #main #aside {
        border-left: none;
        border-top: 1px solid black;
      }
      #main #nav {
        padding-bottom: 10px;
        padding-top: 0;
      }
    }
  </style>
  <body>
    <div id="header">
      <h1>Lorem, ipsum dolor.</h1>
    </div>
    <div id="main">
      <div id="nav">
        <ul>
          <li><a href="#">Lorem, ipsum dolor.</a></li>
          <li><a href="#">Lorem, ipsum dolor.</a></li>
          <li><a href="#">Lorem, ipsum dolor.</a></li>
        </ul>
      </div>
      <div id="article">
        <h2>Lorem ipsum dolor sit amet.</h2>
        <p>
          Lorem ipsum, dolor sit amet consectetur adipisicing elit. Enim,
          consequuntur culpa accusantium nisi autem atque corporis molestiae aut
          perspiciatis nesciunt perferendis ut. Excepturi modi eius voluptas
          itaque delectus quidem rerum?Lorem ipsum, dolor sit amet consectetur
          adipisicing elit. Enim, consequuntur culpa accusantium nisi autem
          atque corporis molestiae aut perspiciatis nesciunt perferendis ut.
          Excepturi modi eius voluptas itaque delectus quidem rerum?Lorem ipsum,
          dolor sit amet consectetur adipisicing elit. Enim, consequuntur culpa
          accusantium nisi autem atque corporis molestiae aut perspiciatis
          nesciunt perferendis ut. Excepturi modi eius voluptas itaque delectus
          quidem rerum?Lorem ipsum, dolor sit amet consectetur adipisicing elit.
          Enim, consequuntur culpa accusantium nisi autem atque corporis
          molestiae aut perspiciatis nesciunt perferendis ut. Excepturi modi
          eius voluptas itaque delectus quidem rerum?Lorem ipsum, dolor sit amet
          consectetur adipisicing elit. Enim, consequuntur culpa accusantium
          nisi autem atque corporis molestiae aut perspiciatis nesciunt
          perferendis ut. Excepturi modi eius voluptas itaque delectus quidem
          rerum?Lorem ipsum, dolor sit amet consectetur adipisicing elit. Enim,
          consequuntur culpa accusantium nisi autem atque corporis molestiae aut
          perspiciatis nesciunt perferendis ut. Excepturi modi eius voluptas
          itaque delectus quidem rerum?Lorem ipsum, dolor sit amet consectetur
          adipisicing elit. Enim, consequuntur culpa accusantium nisi autem
          atque corporis molestiae aut perspiciatis nesciunt perferendis ut.
          Excepturi modi eius voluptas itaque delectus quidem rerum?Lorem ipsum,
          dolor sit amet consectetur adipisicing elit. Enim, consequuntur culpa
          accusantium nisi autem atque corporis molestiae aut perspiciatis
          nesciunt perferendis ut. Excepturi modi eius voluptas itaque delectus
          quidem rerum?Lorem ipsum, dolor sit amet consectetur adipisicing elit.
          Enim, consequuntur culpa accusantium nisi autem atque corporis
          molestiae aut perspiciatis nesciunt perferendis ut. Excepturi modi
          eius voluptas itaque delectus quidem rerum?Lorem ipsum, dolor sit amet
          consectetur adipisicing elit. Enim, consequuntur culpa accusantium
          nisi autem atque corporis molestiae aut perspiciatis nesciunt
          perferendis ut. Excepturi modi eius voluptas itaque delectus quidem
          rerum?
        </p>
      </div>
      <div id="aside">
        <p>
          Lorem ipsum, dolor sit amet consectetur adipisicing elit. Sunt natus
          labore, modi beatae nihil dolorum ad consequatur, debitis animi, quas
          totam quos iste provident illum odio dolor harum. Ratione, modi!
        </p>
      </div>
    </div>
    <div id="footer">
      <h3>footer</h3>
    </div>
  </body>
</html>