JSFiddle - React, Tailwind, and code Playground

HTML

<div class="container">
  <div class="button button1">
    This is a longer button
  </div>
  <div class="button button2">
    Optional Button
  </div>
  <div class="button button3">
    Confirmation button
  </div>
</div>
<button class="width-button">Toggle width</button>
<button class="toggle-button-button">Toggle optional button</button>

CSS

.container {
  width: 480px;
  background-color: lightgray;
  margin: 40px 0;
  padding: 12px;

  transition: width 200ms ease-in-out;
}

/* This .narrow class is just to simluate a width that causes either the 3 or 2 button variants to collapse, I cannot use the class as part of the solution. */
.container.narrow {
  width: 320px;
}

.button {
  padding: 12px;
  background-color: green;
  display: inline-block;
  border-radius: 8px;
}

.button2.hide {
  display: none;
}

.button3 {
  float: right;
}

JavaScript

document.querySelector('.width-button').addEventListener('click', () => {
/* This .narrow class is just to simluate a width that causes either the 3 or 2 button variants to collapse, I cannot use the class as part of the solution. */
  document.querySelector('.container').classList.toggle('narrow');
});

document.querySelector('.toggle-button-button').addEventListener('click', () => {
  document.querySelector('.button2').classList.toggle('hide');
});