Q: How to make groups of divs the same width using only CSS? 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; }


A: 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.

A: 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

A: Use min-width and max-width:
div{/*use the selector what you're using*/
  min-width: 150px;
  max-width: 350px;
  width: auto;
  display: inline-block;
}


If you want to get a uniform width, then you have to define a class name and style like this:
.width1{
  width: 200px;
}

.width2{
  width: 300px;
}

