JSFiddle - React, Tailwind, and code Playground

HTML

<div class="imageContainer">
  <div class="imageBlock">
    <!--<img class="image" src="image.png">-->
    <div class="image">
       your image
    </div>
  </div>
  <div class="buttonBlock">
    <!--<img class="button" srck="button.png">-->
    <div class="button">
       your button
    </div>
  </div>
</div>
<div class="imageContainer">
  <div class="imageBlock">
    <!--<img class="image" src="image.png">-->
    <div class="image">
       your image
    </div>
  </div>
  <div class="buttonBlock">
    <!--<img class="button" srck="button.png">-->
    <div class="button">
       your button
    </div>
  </div>
</div>
<div class="imageContainer">
  <div class="imageBlock">
    <!--<img class="image" src="image.png">-->
    <div class="image">
       your image
    </div>
  </div>
  <div class="buttonBlock">
    <!--<img class="button" srck="button.png">-->
    <div class="button">
       your button
    </div>
  </div>
</div>
<div class="imageContainer">
  <div class="imageBlock">
    <!--<img class="image" src="image.png">-->
    <div class="image">
       your image
    </div>
  </div>
  <div class="buttonBlock">
    <!--<img class="button" srck="button.png">-->
    <div class="button">
       your button
    </div>
  </div>
</div>

CSS

.imageContainer {
  width: 400px;
  display: inline-block; 
}

.imageContainer .imageBlock {
   display: inline-block;
}

.imageContainer .imageBlock .image {
  display: inline-block;
  width: 400px;
  height: 300px;
  background-color: darkred;
  
}

.imageContainer .buttonBlock {
  display: inline-block;
  text-align: center;
}

.imageContainer .buttonBlock .button {
  display: inline-block;
  width: 300px;
  margin: 10px 50px; /* simple way to center it */
  height: 100px;
  background-color: cyan;
}