JSFiddle - React, Tailwind, and code Playground

HTML

<div class='container'>



<div class="box">
  <div class="text">
  <p>
  Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Porttitor massa id neque aliquam vestibulum morbi blandit. Nulla pharetra diam sit amet nisl suscipit. Massa tincidunt dui ut ornare lectus sit amet est placerat. Quam nulla porttitor massa id. Justo donec enim diam vulputate ut pharetra sit.
  
  </p>
  </div>
  <div class="middle-box">
  
    
 <img src="https://placehold.co/600x600?text=Image+1">
  
  <img src="https://placehold.co/600x600?text=Image+2">

    
  </div>
  
   <div class="text">
   <p>
   Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vivamus ornare, odio at ultrices scelerisque, metus nisi tristique ex, eget elementum lacus elit at sapien. Cras magna risus, posuere eu turpis nec, placerat egestas metus. 
   </p>
   
   <p>
   Maecenas nec dolor quis purus scelerisque volutpat sed sollicitudin leo. Cras fringilla, dolor non rutrum facilisis, mi nisi congue massa, quis volutpat nisl velit vel nibh.
   </p></div>
 
 
</div>

<div class="text">
  <p>
  Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Porttitor massa id neque aliquam vestibulum morbi blandit. Nulla pharetra diam sit amet nisl suscipit. Massa tincidunt dui ut ornare lectus sit amet est placerat. Quam nulla porttitor massa id. Justo donec enim diam vulputate ut pharetra sit.
  
  </p>
</div>

</div>

CSS

.container {

  padding: 10px;
  border: 2px solid red;
  color: white;

  /* tu peux ajuster la taille du container, eventuellement 
  remplacer par un min-width ou max-width  */
  width: 600px;


}

.box {
  display: grid;

  grid-template-columns: repeat(3, 1fr);
  border: 2px solid blue;


}

.middle-box,
.text {
  margin: 5px;
  background-color: teal;
  padding: 20px;

}

.middle-box img {
  width: 100%;
}