title: Bootstrap 4 - Two small align images beside a large image
body: <p>I'm trying to achieve this using Bootstrap 4.</p>
  
  <p><a href="https://i.stack.imgur.com/Yp9hT.jpg" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/Yp9hT.jpg" alt="bootstrapq"></a><br>
  <sub>(source: <a href="https://imgh.us/bootstrap4q.jpg" rel="nofollow noreferrer">imgh.us</a>)</sub>  </p>
  
  <p><img src="https://i.stack.imgur.com/iCsOI.jpg" alt="two muppets" title="tooltip"></p>
  
  <p>As seen on the image I need 2 columns both having same height, no matter what is the resolution of the pictures inside. The left one is having one big picture and the right one 2 small ones with some gap aligned perfectly to the big one.</p>
  
  <p>Any help would be really appreciated!</p>
  
  <p>My code so far:</p>
  
  <p>HTML:</p>
  
  <pre><code>            &lt;div class="row"&gt;
              &lt;div class="col-lg-6"&gt;
  
                &lt;div class="imagebox"&gt;
                &lt;img class="img-fluid" src="https://placehold.it/1000x1000" alt=""&gt;
                &lt;/div&gt;
  
              &lt;/div&gt;
  
              &lt;div class="col-lg-6"&gt;
                    &lt;div class="imagebox"&gt;
                    &lt;img class="img-fluid" src="https://placehold.it/400x600" alt=""&gt;
                    &lt;/div&gt;
  
                    &lt;div class="spacer30"&gt;&lt;/div&gt;
  
                    &lt;div class="imagebox"&gt;
                    &lt;img class="img-fluid" src="https://placehold.it/400x600" alt=""&gt;
                    &lt;/div&gt;
  
              &lt;/div&gt;                  
          &lt;/div&gt;
  </code></pre>
  
  <p>CSS:</p>
  
  <pre><code>.imagebox{
      overflow: hidden;
      width: 100%;
      height: auto;
  }
  
  .spacer30{
      height:30px;
  }
  </code></pre>