Make buttons the same width without specifying the exact size

This is my favorite method (Flexbox)! -

<div style="width: 100%; background-color: red;">
    <button type="button">A</button>
    <button type="button">B</button>
    <button type="button">C</button>
    <button type="button">D</button>
    <button type="button">E</button>
</div>

div {
  display: flex;
  justify-content: space-around;
}
button {
  width: 100%;
  margin: 5px; /* or whatever you like */
}

No matter how many buttons you have, it will resize the button width automatically and fill the div.

Working pen: http://codepen.io/anon/pen/YpPdLZ

With bootstrap it is as simple as

<div class="btn-group-vertical">

</div>

The simplest way, and the most robust way, is to use a table:

<style>
.buttons { 
  width: 100%;
  table-layout: fixed;
  border-collapse: collapse;
  background-color: red; 
}
.buttons button { 
  width: 100%;
}
</style>
<table class=buttons>
 <tr>
    <td><button type="button">A</button>
    <td><button type="button">B</button>
    <td><button type="button">C</button>
    <td><button type="button">D</button>
    <td><button type="button">E</button>
</table>

(This won’t improve your reputation among colleagues these days if they see your code, though it actually solves the problem probably better than any alternative. So you might consider doing the next best thing: use div markup and display: table etc. Fails on old browsers that don’t support such CSS features.)

This is how I'd tackle a situation like this, taking a queue from front-end grid systems. Use classes! When you remove the button, change the class. Here's a fiddle.

Your HTML markup could change to this:

<div>
    <button type="button" class="fiveup">A</button>
    <button type="button" class="fiveup">B</button>
    <button type="button" class="fiveup">C</button>
    <button type="button" class="fiveup">D</button>
    <button type="button" class="fiveup" id="remove_this">E</button>
</div>
<button id="remove_one">Remove One</button>​

CSS like so:

.fiveup {width: 18%;margin:1%;float: left;}
.fourup {width: 23%;margin:1%;float: left;}

and jQuery like so, though you'll probably want to use this script as part of whatever process removes the button:

$('#remove_one').click(function(){
    $('#remove_this').remove();
    $('button').each(function(){
        $(this).removeClass('fiveup').addClass('fourup');
    });
});​