Qui una soluzione con flex-box. La proprietà flex-grow ripartisce la larghezza dei vari elementi rispetto al contenitore. In questo caso, tutti avranno stessa larghezza. Inoltre ho impostato un margin di 4px per definire lo spazio tra gli elementi.
codice:
<!DOCTYPE HTML>
<html>
  <head>
    <title>Esempio</title>
    <meta charset="utf-8">
    <style type="text/css">
            .fit-width {
                width: 100%;
                display: flex;
            }
            .fit-width>* {
                flex-grow: 1;
                margin-right: 4px;
            }
            .fit-width>:first-child {
                margin-left: 4px;
            }
    </style>
  </head>
  <body>
        <div class="fit-width">
            <button type="button">Bottone 1</button>
            <button type="button">Bottone 2</button>
        </div>
        <div class="fit-width">
            <button type="button">Bottone 1</button>
            <button type="button">Bottone 2</button>
            <button type="button">Bottone 3</button>
        </div>
        <div class="fit-width">
            <button type="button">Bottone 1</button>
            <button type="button">Bottone 2</button>
            <button type="button">Bottone 2</button>
            <button type="button">Bottone 4</button>
        </div>
  </body>
</html>