title: The correct way to create given template
body: <p>I recently found template, which was in the quiz and tried to reproduce given template that was on the image. The tricky part about it is that the quiz already closed and i can't submit my answer for reviewing. I'm still curious about correctness of my template, so i want to ask you, HTML guru's, if i reproduced it right.</p>
  
  <p>Thank you in advance!</p>
  
  <p>IMAGE:</p>
  
  <p><a href="https://i.stack.imgur.com/0Zdil.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/0Zdil.png" alt="enter image description here"></a></p>
  
  <p>LINK: <a href="https://codepen.io/anon/pen/NgyaNM" rel="nofollow noreferrer">Codepan</a></p>
  
  <p>HTML:</p>
  
  <p><div class="snippet" data-lang="js" data-hide="false" data-console="true" data-babel="false">
  <div class="snippet-code">
  <pre class="snippet-code-html lang-html prettyprint-override"><code> &lt;!DOCTYPE html&gt;
      &lt;html lang="en"&gt;
      &lt;head&gt;
        &lt;meta charset="UTF-8"&gt;
        &lt;meta name="viewport" content="width=device-width, initial-scale=1.0"&gt;
        &lt;meta http-equiv="X-UA-Compatible" content="ie=edge"&gt;
        &lt;title&gt;Document&lt;/title&gt;
      &lt;/head&gt;
      &lt;style&gt;
        * {
          padding: 0;
          margin: 0;
        }
        body, html {
          height: 100%;
        }
        div, header  {
          height: 100%;
          min-height: 50px;
          float: left;
          border: 2px solid black;
          box-sizing: border-box;
        }
        header {
          width: 100%;
          height: 25%;
          text-align: center;
        }
        .wrapper {
          height: 75%;
          width: 100%;
        }
        .wrapper &gt; .first-column, .wrapper &gt; .second-column {
          height: 100%;
          width: 50%;
        }
        .wrapper &gt; .first-column &gt; div {
          width: 100%;
        }
        .wrapper &gt; .first-column &gt; .first-row {
          height: calc(100%/3);
        }
        .wrapper &gt; .first-column &gt; .second-row {
          height: calc(100% * 2/3);
        }
        .wrapper &gt; .first-column &gt; .second-row &gt; div {
          height: 100%;
          width: 50%;
        }
        .wrapper &gt; .first-column &gt; .second-row &gt; .second-column &gt; div{
          height: 50%;
          width: 100%;
        }
        .wrapper &gt; .first-column &gt; .second-row &gt; .second-column &gt; div{
          height: 50%;
          width: 100%;
        }
        .wrapper &gt; .second-column &gt; div {
          height: 100%;
          width: 50%;
        }
        .wrapper &gt; .second-column &gt; .second-column &gt; div{
          width: 100%;
          height: calc(100%/3);
        }
      &lt;/style&gt;
      &lt;body&gt;
        &lt;header&gt;
          Test Table
        &lt;/header&gt;
        &lt;div class="wrapper"&gt;
          &lt;div class="first-column"&gt;
      
            &lt;div class="first-row"&gt;
      
            &lt;/div&gt;
      
            &lt;div class="second-row"&gt;
      
              &lt;div class="first-column"&gt;&lt;/div&gt;
      
              &lt;div class="second-column"&gt;
                &lt;div class="first-row"&gt;&lt;/div&gt;
                &lt;div class="second-row"&gt;&lt;/div&gt;
              &lt;/div&gt;
      
            &lt;/div&gt;
      
          &lt;/div&gt;
      
          &lt;div class="second-column"&gt;
      
            &lt;div class="first-column"&gt;&lt;/div&gt;
      
            &lt;div class="second-column"&gt;
              &lt;div class="first-row"&gt;&lt;/div&gt;
              &lt;div class="second-row"&gt;&lt;/div&gt;
              &lt;div class="third-row"&gt;&lt;/div&gt;
            &lt;/div&gt;
      
          &lt;/div&gt;
      
        &lt;/div&gt;
      
      &lt;/body&gt;
      &lt;/html&gt;</code></pre>
  </div>
  </div>
  </p>