How to make elements automatically adjust?

Question

So I have this button screen:

These buttons, when clicked, redirect the user to email, maps, phone, finally...

When the user DOES NOT have one of these data, logically, tbm will not have the button, as I put of example the image above.

The first user has all the data, the second has no link to share and the third has only phone.

My question is:

How do I automatically adjust these buttons?

It would be pretty stupid of me to go testing all the data for myself to adjust in the hand, as the image below, when the user only has phone:

if(!email){
    if(!localizacao){
        if(!compartilhar){
           $('#' + id + '.telefone').css('width', '83.1%');

        }
     }
 }

I just can’t think of any other way to do it...

Here is the HTML of the buttons:

$(".listagem-cartoes").append(
        `<div class="item-display">
            <div class="item draggable ui-widget-content">
                <div class="side info lista-cartoneira foto" id=${id}>
                    <div class="avatar">
                        <img src="${capa}" alt="" class="circle responsive-img"> 
                    </div>
                    <div class="nomes">
                        <div class="nome-empresa lista-cartoneira"><h1>${empresa}</h1></div>        
                        <div class="nome lista-cartoneira"><h2>${nome}</h2></div>        
                    </div>
                    </div>
                    <div class="side buttons">
                        <div class="atalhos-cartoneira col s4 botaoCompartilhar${id}" id=${id} style="background-color: #00BFA5;">
                            <i class="material-icons compartilhar" id=${id}>open_in_new</i>
                        </div>                    
                    <div class="atalhos-cartoneira col s4 botaoLocalizacao${id}" id=${id} style="background-color: #757575;">
                        <i class="material-icons localizacao" id=${id}>place</i>
                    </div>
                    <div class="atalhos-cartoneira col s4 botaoEmail${id}" id=${id} style="background-color: #ffb74d;">
                        <i class="material-icons email" id=${id}>email</i>
                    </div>
                    <div class="atalhos-cartoneira col s4 botaoTelefone" id=${id} style="background-color: #00b0ff;">
                        <i class="material-icons telefone" id=${id}>phone</i>
                    </div>
                </div>
            </div>            
        </div>`
    );  

I’m using Materialize 0.100.2.

I didn’t add anything else to the css, so I think it’s unnecessary to add the css here, because it’s not related to anything in the buttons.