title: Squares inside the square with CSS
body: <p>I am trying to have 4 little squares inside one big square. Those small squares need to be position at the bottom inside a big square, so far my code looks like this</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-css lang-css prettyprint-override"><code>.date-grid button {
    position: relative;
    border: 0;
    width: 7.5ch;
    height: 7.5ch;
    background-color: #A1A100;
    margin-bottom: 2px;
  }
  
  .smallHolder {
    display: flex;
    align-items: flex-end;
  }
  
  .small1 {
    border: 0;
    width: 2.5ch;
    height: 2.5ch;
    background-color: gray;
  }
  
  .small2 {
    width: 2.5ch;
    height: 2.5ch;
    background-color: red;
  }
  
  .small3 {
    border: 0;
    width: 2.5ch;
    height: 2.5ch;
    background-color: green;
  }
  
  .small4 {
    border: 0;
    width: 2.5ch;
    height: 2.5ch;
    background-color: blue;
  }</code></pre>
  <pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;div class="date-grid"&gt;
    &lt;button class="vrs22"&gt;
         &lt;time&gt;3&lt;/time&gt;
      &lt;div class="smallHolder"&gt;
        &lt;div class="small1"&gt;&lt;/div&gt;
        &lt;div class="small2"&gt;&lt;/div&gt;
        &lt;div class="small3"&gt;&lt;/div&gt;
        &lt;div class="small4"&gt;&lt;/div&gt;
      &lt;/div&gt;   
     &lt;/button&gt;
  &lt;/div&gt;</code></pre>
  </div>
  </div>
  </p>
  
  <p>What I am trying to achieve is this:</p>
  
  <p><a href="https://i.stack.imgur.com/6fwDn.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/6fwDn.png" alt="enter image description here"></a></p>
  
  <p>Idea is to have this flexible so if I have 2 small squares, results should be like this:</p>
  
  <p><a href="https://i.stack.imgur.com/MCX55.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/MCX55.png" alt="enter image description here"></a></p>
  
  <p>Can anybody try to help me with this?</p>