How to make groups of divs the same width using only CSS?

Question

I've got a group of buttons (divs) which I would like to be the same length for all buttons within a logical group.

I could simply do a min-length for the CSS style of the button, however some button groups are short, while others are very long. This makes a uniform min-length either insufficient for long groups or wasteful/stupid looking for short ones. Additionally, multiple groups (short and long) can appear on the same screen.

(These divs are all styled with display: inline-block, so that's why they don't fill the width of the container)

I've thought of a few nasty solutions to this, but none are preferable:

• Set a specific min-length for each group
• Use JavaScript to resize the buttons

I was wondering if there was a generic, pure CSS solution to the above problem instead of using either of these methods. Thanks for any help you can provide.

---

Edit: Here is the markup and CSS I've got so far. Pretty simple:

HTML:

<div class="wrapper">
    <div class="button">Lorem ipsum</div>
    <div class="button">Lorem ipsum dolar</div>
    <div class="button">Lorem</div>
</div>

CSS:

div.button { display: inline-block; min-width: 50px; }

Answer 1

Wrap similar buttons in a container div with a desired width and set the inners divs to:

box-sizing: border-box;
width: 100%;

This will allow you to edit the widths of a logical grouping in one place.

Answer 2

wrap them both in a container.

<div class="group">
    <div class="button">Hi</div>
    <div class="button">Wassup</div>
    <div class="button">Yo</div>
</div>

then apply css like this:

    display:inline-block;
    min-width: 100%;

and then set the div "group" that groups those divs in the width you wanted to