CSS Alinhar Elemento | Front-end

Fala meus queridos,

Estou querendo fazer um alinhamento no CSS, porém não estou conseguindo. Queria entender melhor o por que isso não rola.

Realizei um projeto, pelo qual as respostas são dinâmicas de acordo com o que o usuário selecionar. Por ser respostas de acordo com o usuário, as respostas estão vindo do JS, onde realizei um retorno string para cada comparação.

Uma das respostas pela qual o JS retorna, faço uma quebra de linhas para ajustar o primeiro valor e o segundo valor como mostro abaixo:

return "Os dois números tem os mesmos valores, porém os tipos diferentes.<br>Primeiro Valor = NUMBER<br>Segundo Valor = STRING";

Estou tentando realizar um alinhamento central no elemento resultado, porém não consigo.

CSS

*{
    padding: 0%;
    margin: 0%;
}


.corpo__pagina{

    background-color: #008EAB;
    margin-top: 15%;
}

.principal{

    background-color: #00BBE0;
    display: flex;
    flex-direction: column;
    margin: 0% 30% 0% 30%;
    padding: 2%;
    align-items: center;
    border: 4px solid;
    border-radius: 10px;
    gap: 10px;
    

}

.selecionar{

    background-color: #FEDFE0;
    width: 30%;
    font-family: 'Lucida Sans', 'Lucida Sans Regular', 'Lucida Grande', 'Lucida Sans Unicode', Geneva, Verdana, sans-serif;
}

.resultado{
    font-weight: bold;
    align-items: center;
        
}

HTML

<!DOCTYPE html>
<html lang="pt-br">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <link rel="stylesheet" href="day1.css">
    <title>Comparações</title>
</head>
<body class="corpo__pagina">


    <section class="principal">
        <label>Escolha o primeiro número/string para comparação:</label>
        
        <select class="selecionar" id="primeiro__valor">
            <option selected disabled value="">--Selecione o valor</option>
            <option value="1">1 (NUMBER)</option>
            <option value="1">'1' (STRING)</option>
            <option value="30">30 (NUMBER)</option>
            <option value="30">'30' (STRING)</option>
            <option value="10">10 (NUMBER)</option>
            <option value="10">'10' (STRING)</option>
        </select>

        <label>Escolha o segundo número/string para comparação:</label>
        
        <select class="selecionar" id="segundo__valor">
            <option selected disabled value="">--Selecione o valor</option>
            <option value="1">1 (NUMBER)</option>
            <option value="1">'1' (STRING)</option>
            <option value="30">30 (NUMBER)</option>
            <option value="30">'30' (STRING)</option>
            <option value="10">10 (NUMBER)</option>
            <option value="10">'10' (STRING)</option>
        </select>

        <label class="resultado" id="resultado"></label>    
    </section>
    
      
    <script src="day1.js"></script>
</body>
</html>

Opa Lucas, tudo certo?

Nesse caso, os elementos não estão sendo alinhados por conta do uso da propriedade 'align-itens' e como inserimos a string, essa propriedade é utilizada para alinhar elementos em uma flex-box, porém, por conta da classe "resultado" não estar em um container com display flex, não está funcionando.

Sugiro que dê uma olhadinha na documentação referente a essa propriedade e ao nosso guia de flex-box:

Ademais, como cada parte está sendo inserido como uma string, todo o texto engloba essa string e não é considerado um elemento diferente. Sendo assim, sugiro que adicione cada linha como um elemento, como um parágrafo, por exemplo, por meio da tag "<p></p>"

É importante lembrar que a direção padrão de uma flex-box é a de linhas, sendo assim, caso queira apresentar cada elemento um abaixo do outro, deve utilizar a propriedade flex-direction: column:

.resultado{
    display: flex;
    flex-direction: column;
    font-weight: bold;
    align-items: center;

}

Fico à disposição.

Tenha um bom dia e bons estudos.