JSFiddle - React, Tailwind, and code Playground

HTML

<div class="wrapper">
  <div class="text">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. 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. Integer id dignissim mauris, ut pulvinar lectus. Fusce id dui ac eros interdum ullamcorper. Quisque quis dolor nec risus semper malesuada.</div>
  <div class="middle-box">
  
    <div class="image image-1">
    image A
  </div>
    <div class="image image-2">
    image B
  </div>
    
  </div>
  
   <div class="text">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. 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. Integer id dignissim mauris, ut pulvinar lectus. Fusce id dui ac eros interdum ullamcorper. Quisque quis dolor nec risus semper malesuada.</div>
 
 
</div>

CSS

.wrapper {
  display: flex;
  gap: 10px;
  }
  
  
.middle-box,
.text {
  background-color: #20262e;
  color: #fff;
  padding: 20px;
  
}


.middle-box {
min-width: 200px;
display: flex;
flex-direction: column;
gap: 10px;
}


.image{
   
min-height: 200px;
}

.image-1 {
  background-color: blue;
 
}
.image-2 {
  background-color: red;
 

}