title: How to make groups of divs the same width using only CSS?
body: <p>I've got a group of buttons (divs) which I would like to be the same length for all buttons within a logical group.</p>
  
  <p>I could simply do a <code>min-length</code> for the CSS style of the button, however some button groups are short, while others are very long. This makes a uniform <code>min-length</code> either insufficient for long groups or wasteful/stupid looking for short ones. Additionally, multiple groups (short and long) can appear on the same screen.</p>
  
  <p><img src="https://i.stack.imgur.com/5tCwe.png" alt="Example of Button Layouts"></p>
  
  <p>(These divs are all styled with <code>display: inline-block</code>, so that's why they don't fill the width of the container)</p>
  
  <p>I've thought of a few nasty solutions to this, but none are preferable:</p>
  
  <ul>
  <li>Set a specific <code>min-length</code> for each group</li>
  <li>Use JavaScript to resize the buttons</li>
  </ul>
  
  <p>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.</p>
  
  <hr>
  
  <p><strong>Edit</strong>: Here is the markup and CSS I've got so far. Pretty simple:</p>
  
  <p><strong>HTML:</strong></p>
  
  <pre><code>&lt;div class="wrapper"&gt;
      &lt;div class="button"&gt;Lorem ipsum&lt;/div&gt;
      &lt;div class="button"&gt;Lorem ipsum dolar&lt;/div&gt;
      &lt;div class="button"&gt;Lorem&lt;/div&gt;
  &lt;/div&gt;
  </code></pre>
  
  <p><strong>CSS:</strong></p>
  
  <pre><code>div.button { display: inline-block; min-width: 50px; }
  </code></pre>