JSFiddle - React, Tailwind, and code Playground

by Petra1999

HTML

<div class="image-group">
  <figure class="image-group__image image-group__image--big"><img src="https://via.placeholder.com/150/FF0000"/></figure>
  <figure class="image-group__image image-group__image--small"><img src="https://via.placeholder.com/150/FFFF00"/></figure>
  <figure class="image-group__image image-group__image--small"><img src="https://via.placeholder.com/150/00FF00"/></figure>
</div>

CSS

body {
  margin: 0;
}
figure {
  margin: 0;
  padding: 0;
}

.image-group {
  border:1px solid red;
}

.image-group__image:first-of-type {
  display: block;
}
.image-group__image{
  display:none;
}

.image-group__image img {
  width: 100%;
  height: auto;
}

@media screen and (min-width: 700px) {
  .image-group {
    width: 740px;
    display: grid;
    grid-template:
      "big big" auto
      "left right" auto
      / 1fr 1fr;
     grid-gap: 20px;
  }

  .image-group__image{
    display:block;
  }
  
  .image-group__image--big {
    width: 100%;
    grid-area: big;
  }
  
  .image-group__image--small {
    width: 100%;
  }
  
  .image-group__image--small:nth-of-type(0){
    grid-area: left;
  }
  .image-group__image--small:nth-of-type(1){
    grid-area: right;
  }
  
  
}