Is it possible to have two buttons in one row, where one is wider than the other? If the viewport size becomes too small, can the buttons automatically switch to sit in a single column with the smaller button stretching its width to match the wider one?
I've provided a codepen example to illustrate my current setup:
.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;
}<div class="outer">
<div class="inner">
<button class="stroke">
<span>WIDER BUTTON</span>
</button>
<button class="flat">
<span>BUTTON</span>
</button>
</div>
</div>Take a look at the CodePen demonstration here.
The content within the buttons is dynamic, so manually setting a fixed width won't work. Can this layout adjustment be achieved using only (s)css?
Thank you for any assistance in advance.