Html – How can I format it so the squares are vertically aligned?

I need the colored squares to be aligned vertically, I have no idea how to do that.

I’m using "div" to align them into columns, but they’re not straight.

Is there a way to fix this? Do I need to use another tag?

I’m just learning the basic of html and css in school. 🙂

I’ve tried width, margin, but I don’t find the right one.

Here’s my code:

HTML:

<div  class="coluna_1">

        <div class="legenda">
        <span class="leghidrogenio"></span>
        &nbsp;&nbsp;&nbsp;
        <span>Hidrogênio</span>
        </div>

        <div class="legenda">
            <span class="legmetaistransicao"></span>
            &nbsp;&nbsp;&nbsp;
            <span>Metais de Transição</span>
        </div>

        <div class="legenda">
            <span class="legnaometaispoliatomicos"></span>
            &nbsp;&nbsp;&nbsp;
            <span>Não Metais Poliatomicos</span>
        </div>

        <div class="legenda">
            <span class="legdesconhecidos"></span>
            &nbsp;&nbsp;&nbsp;
            <span>Propriedades Químicas Desconhecidas</span>
        </div> 
        
    </div>

    <div>‎</div>
    
    <div  class="coluna_2">    

        <div class="legenda">
        <span class="legmetaisalcalinos"></span>
        &nbsp;&nbsp;&nbsp;
        <span>Metais Alcalinos</span>
        </div>

        <div class="legenda">
            <span class="legmetaispostransicao"></span>
            &nbsp;&nbsp;&nbsp;
            <span>Metais pós-transição</span>
        </div>

        <div class="legenda">
            <span class="legnaometaisdiatomicos"></span>
            &nbsp;&nbsp;&nbsp;
            <span>Não Metais Diatomicos</span>
        </div>

        
        <div class="legenda">
        <span class="leglantanideos"></span>
        &nbsp;&nbsp;&nbsp;
        <span>Lantanídeos</span>
        </div>


    </div>

    <div>‎</div>

    <div  class="coluna_3"> 
    
    <div class="legenda">
        <span class="legmetaisalcalinoterrosos"></span>
        &nbsp;&nbsp;&nbsp;
        <span>Metais Alcalinoterrosos</span>
    </div>

    <div class="legenda">
        <span class="legsemimetais"></span>
        &nbsp;&nbsp;&nbsp;
        <span>Semimetais</span>
    </div>  

    <div class="legenda">
        <span class="leggasesnobres"></span>
        &nbsp;&nbsp;&nbsp;
        <span>Gases Nobres</span>
    </div>

    <div class="legenda">
        <span class="legactinideos"></span>
        &nbsp;&nbsp;&nbsp;
        <span>Actinídeos</span>
    </div>

    </div>

CSS

.coluna_1 {
    display: flex;
}

.coluna_2 {
    display: flex;
}

.coluna_3 {
    display: flex;
}

.leghidrogenio {
    height:30px;
    width:30px; 
    background:#9bc0f7;
    display:flex;
    border-radius: 10px;
}

div.leghidrogenio:active + th.hidrogenio {
    scale: 150%;
}

th.hidrogenio:active + div.leghidrogenio {
    scale: 150%;
}

.legmetaisalcalinos {
    height:30px;
    width:30px; 
    background:#fa4d56;
    display:flex;
    border-radius: 10px;
}

.legmetaisalcalinoterrosos {
    height:30px;
    width:30px; 
    background:#f7cb3d;
    display:flex;
    border-radius: 10px;
}

.legmetaistransicao {
    height:30px;
    width:30px; 
    background:#6fdc8c;
    display:flex;
    border-radius: 10px;
}

.legmetaispostransicao {
    height:30px;
    width:30px; 
    background:#8a3ffc;
    display:flex;
    border-radius: 10px;
}

.legsemimetais {
    height:30px;
    width:30px; 
    background:#fd7d7d;
    display:flex;
    border-radius: 10px;
}

.legnaometaispoliatomicos {
    height:30px;
    width:30px; 
    background:#48bf53;
    display:flex;
    border-radius: 10px;
}

.legnaometaisdiatomicos {
    height:30px;
    width:30px; 
    background:#ff964f;
    display:flex;
    border-radius: 10px;
}

.leggasesnobres {
    height:30px;
    width:30px; 
    background:#ff7eb6;
    display:flex;
    border-radius: 10px;
}

.legdesconhecidos {
    height:30px;
    width:30px; 
    background:#dddddd;
    display:flex;
    border-radius: 10px;
}

.leglantanideos {
    height:30px;
    width:30px; 
    background:#404be3;
    display:flex;
    border-radius: 10px;
}

.legactinideos {
    height:30px;
    width:30px; 
    background:#4589ff;
    display:flex;
    border-radius: 10px;
}