JSFiddle - React, Tailwind, and code Playground

by Per Andersson

HTML

Michael_B's version
<div class="numbers">
    <div class="row">
        <div class="button number" id="number1">1</div>
        <div class="button number" id="number2">2</div>
        <div class="button number" id="number3">3</div>
    </div>
    <div class="row">
        <div class="button number" id="number4">4</div>
        <div class="button number" id="number5">5</div>
        <div class="button number" id="number6">6</div>
    </div>
    <div class="row">
        <div class="button number" id="number7">7</div>
        <div class="button number" id="number8">8</div>
        <div class="button number" id="number9">9</div>
    </div>
    <div class="row">
        <div class="button number" id="number0">0</div>
        <div class="button" id="colon">:</div>
    </div>
</div>

<hr>
LGSon's version
<div class="numbers2">
    <div class="row">
        <div class="button number" id="number1b">1</div>
        <div class="button number" id="number2b">2</div>
        <div class="button number" id="number3b">3</div>
    </div>
    <div class="row">
        <div class="button number" id="number4b">4</div>
        <div class="button number" id="number5b">5</div>
        <div class="button number" id="number6b">6</div>
    </div>
    <div class="row">
        <div class="button number" id="number7b">7</div>
        <div class="button number" id="number8b">8</div>
        <div class="button number" id="number9b">9</div>
    </div>
    <div class="row">
        <div class="button number" id="number0b">0</div>
        <div class="button" id="colon">:</div>
    </div>
</div>

CSS

/* Michael_B */
.numbers .row {
    display: flex;
    flex-direction: row;
    flex-grow: 1;
    justify-content: space-between;
}

.numbers .button {
    display: flex;
    flex-basis: 33.33%;
    justify-content: center;
    align-items: center;
    margin: 5px;
    border-radius: 5px;
    border: 10px solid gray;
    background: rgba(255, 255, 255, 0.2);
    cursor: pointer;
}

#number0 {
    flex-basis: calc(66.67% + 10px);
}


 /* LGSon */
.numbers2 .row {
    display: flex;
    width: calc(100% - 30px);   /* 30px = the sum of the buttons margin: 5px
                                          to avoid horizontal scroll            */
}

.numbers2 .button {
    display: flex;
    flex-basis: 33.33%;
    flex-shrink: 0;             /* we need flex-grow/shrink to be 1/0 to make
                                   it calculate the size properly               */
    box-sizing: border-box;     /* to take out the borders when calculate the 
                                   flex shrink/grow factor                      */
    justify-content: center;
    align-items: center;
    margin: 5px;
    border-radius: 5px;
    border: 10px solid gray;
    background: rgba(255, 255, 255, 0.2);
    cursor: pointer;
}

#number0b {
    flex-basis: calc(66.66% + 10px);
}