JSFiddle - React, Tailwind, and code Playground

HTML

<div class="wrapper">
  <div class="regular">
    <button>RegA</button>
  </div>
  
  <div class="image">
    <button></button>
  </div>
  
  <div class="regular">
    <button>RegB</button>
  </div>
</div>

CSS

* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

button, img {
  display: block;
  border: none;
}

.wrapper {
  display: flex;
  align-items: stretch;
}

.regular button {
  padding: 20px 40px;
  background-color: #aaaaaa;
}

.image button {
  height: 100%;
  background-image: url("https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcT7vnGsgBgV8QW50dp-wZ4GoCNWu4egKYuxAw&s");
  background-repeat:no-repeat;
  background-position: center center;
  background-size: cover;
}

button { font-size: 50px; }
@media only screen and (max-width: 800px) { button { font-size: 40px; } }
@media only screen and (max-width: 700px) { button { font-size: 30px; } }
@media only screen and (max-width: 600px) { button { font-size: 20px; } }

JavaScript

makeSquare(".image button");
window.addEventListener("resize", () => {
  makeSquare(".image button");
});

function makeSquare(selector) {
  const buttons = document.querySelectorAll(selector);
  buttons.forEach((button) => {
    button.style.width = `${button.offsetHeight}px`;
  });
}