title: 1 image vs 2 images side by side
body: <p>Can some please tell me how to add 1 image side-by-side as shown in this image, I mean with complete responsiveness</p>
  <p><a href="https://i.stack.imgur.com/rY9qF.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/rY9qF.png" alt="check the image here" /></a></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>.container {
    margin: auto;
    width: 78vw;
    height: 50vh;
    background-color: aqua;
    border-radius: 10%;
    display: flex;
    flex-direction: row;
    justify-content: space-between;
    flex-wrap: wrap;
  }
  
  .big-image {
    background: url("https://media.istockphoto.com/photos/nothing-better-than-sliding-into-bed-with-a-good-read-picture-id929998552?b=1&amp;k=20&amp;m=929998552&amp;s=170667a&amp;w=0&amp;h=GkJP5lHXoyVLYDIa86G6stcyEvoaAgN7xBFqgrc3QH8=");
    width: 65%;
    height: auto;
    background-size: contain;
    background-repeat: no-repeat;
  }
  
  .twoSmallImages {
    display: flex;
    flex-direction: column;
    justify-content: start;
    width: 33%;
    height: 100%;
  }
  
  .img1 {
    background: url("https://media.istockphoto.com/photos/nothing-better-than-sliding-into-bed-with-a-good-read-picture-id929998552?b=1&amp;k=20&amp;m=929998552&amp;s=170667a&amp;w=0&amp;h=GkJP5lHXoyVLYDIa86G6stcyEvoaAgN7xBFqgrc3QH8=");
    width: 100%;
    height: 45%;
    background-size: contain;
    background-repeat: no-repeat;
    margin: 2px auto;
    background-color: #fff;
  }
  
  .img2 {
    background: url("https://media.istockphoto.com/photos/nothing-better-than-sliding-into-bed-with-a-good-read-picture-id929998552?b=1&amp;k=20&amp;m=929998552&amp;s=170667a&amp;w=0&amp;h=GkJP5lHXoyVLYDIa86G6stcyEvoaAgN7xBFqgrc3QH8=");
    width: 100%;
    height: 45%;
    background-size: contain;
    background-repeat: no-repeat;
    margin: 2px auto;
    background-color: brown;
  }</code></pre>
  <pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;div class="container"&gt;
    &lt;div class="big-image"&gt;&lt;/div&gt;
    &lt;div class="twoSmallImages"&gt;
      &lt;div class="img1"&gt;&lt;/div&gt;
      &lt;div class="img2"&gt;&lt;/div&gt;
    &lt;/div&gt;
  &lt;/div&gt;</code></pre>
  </div>
  </div>
  </p>