same-width childen in inline-flex

I'm trying to make a group of buttons appear as a unified component that can be used inline in a paragraph for example. The best way I've found so far is to wrap them in a <span> and style it with display: inline-flex.

It works fine, but now I would also like to make every button the same width, without taking up any more space than necessary. In other words, I want each button to be as wide as the one with the longest content needs to be minimally.

Is there a way to achieve that using only css?

Here's some example code of of what I have so far:

<!-- begin snippet: js hide: false console: true babel: false -->

<!-- language: lang-css -->

button {
  border: 1px gray solid;
  border-radius: 5px;
}
span.button-group {
  display: inline-flex;
}
span.button-group button:not(:last-child){
  border-top-right-radius: 0;
  border-bottom-right-radius: 0;
  border-right-width: 0;
}
span.button-group button:not(:first-child){
  border-top-left-radius: 0;
  border-bottom-left-radius: 0;
}

<!-- language: lang-html -->

<p>
Here is a paragraph with a set of buttons: 
 <span class="button-group">
   <button>A</button>
   <button>Longer</button>
   <button>B</button>
   <button>C</button>
 </span>
</p>

<!-- end snippet -->

As far as I know it's not really possible using flexbox if the amount of buttons can differ, but you can use css grid for that:

<!-- begin snippet: js hide: false console: true babel: false -->

<!-- language: lang-css -->

button {
  border: 1px gray solid;
  border-radius: 5px;
}
span.button-group {
  display: inline-grid; grid-auto-flow: column; grid-auto-columns: 1fr;
}
span.button-group button:not(:last-child){
  border-top-right-radius: 0;
  border-bottom-right-radius: 0;
  border-right-width: 0;
}
span.button-group button:not(:first-child){
  border-top-left-radius: 0;
  border-bottom-left-radius: 0;
}

<!-- language: lang-html -->

<p>
Here is a paragraph with a set of buttons: 
 <span class="button-group">
   <button>A</button>
   <button>Longer</button>
   <button>B</button>
   <button>C</button>
 </span>
</p>

<!-- end snippet -->

grid-auto-flow: column; makes automatically enough columns to put all items in one row, grid-auto-columns: 1fr; makes all columns the same width (so all will be the same as the largest one).