I have two buttons in one row, one wider than the other. If the viewport gets too small, the buttons should "break", meaning they sit in one column. In that case the smaller button should stretch its width to the width of the wider button.

I have prepared a codepen which simulates my current stand point:

```css
.outer {
  display: flex;
  justify-content: center;
}

.inner {
  display: inline-grid;
  grid-template-columns: repeat(2, minmax(min-content, max-content));
  grid-gap: 16px;
}

button {
  border: none;
  background: transparent;
  padding: 10px 48px;
}

.stroke {
  border-bottom: 2px solid black;
}

.flat {
  background: black;
  color: white;
}
```

```html
<div class="outer">
  <div class="inner">
    <button class="stroke">
      <span>WIDER BUTTON</span>
    </button>
    <button class="flat">
      <span>BUTTON</span>
    </button>
  </div>
</div>
```

<https://codepen.io/simonmeier/pen/xxOMKQg>

The texts in the buttons are dynamic, meaning I don't know what's gonna be in there, so "hard-coding" a width doesn't work.

Is this possible with plain (s)css?

Thanks in advance.