JSFiddle - React, Tailwind, and code Playground

HTML

<div class="main-block">
  <div class="description">
    <h1>About restaurent</h1>
    <p>Nunc viverra rhoncus magna, quis condimentum dui pretium sed. Praesent rhoncus velit odio, in facilisis libero consequat eu. Vivamus fringilla efficitur tortor sed lacinia. In sed tempor massa, vel rutrum purus. Nulla tempus ultricies diam. Maecenas cursus justo quis est aliquam suscipit. Aenean sed purus dui.</p>
    <button>Read more</button>
  </div>
  
  <div class="images">
    <div class="images-left">
      <img src="http://lorempixel.com/150/100/food/" alt="">
      <img src="http://lorempixel.com/150/120/food/" alt="">
    </div>
    
    <div class="images-right">
      <img src="http://lorempixel.com/150/140/food/" alt="">
      <img src="http://lorempixel.com/150/160/food/" alt="">
    </div>
  </div>
</div>

CSS

img{
  max-width: 100%;
  margin: 10px 5px
}

.main-block{
  border: 1px solid #666;
  padding: 15px;
  margin: 25px
}
.images{
  text-align: center
}
.images-left img{
  vertical-align: bottom;
}
.images-right img{
  vertical-align: top;
}

@media (min-width: 768px){
  .main-block{
    display: grid;
    grid-template-columns: 1fr 360px;
  }
  .images{
    text-align: right
  }
  .images-left{
    float: left;
    width: 50%;
    margin-top: 60px;
  }
  .images-right{
    float: right;
    width: 50%;
    text-align: left;
  }
}