Label on top on input that uses flex

Question

Im using flex to format input on a row format. But right now im trying to put label on top of those inputs and its not working. Im tried using display block and floating left or right but still remains on the left side. How should i style label so it floats to the top of those inputs?

This is the snippet:

.box {
        padding-top: 1rem;
    }
    
    .inside-box {
        max-width: 51rem;
        margin: 0 auto;
    }
    
    .form-group {
        display: flex;
        flex-direction: column;
    }
    
    .row {
        display: flex;
    }
    
    .razao-social-content {
        flex: 2 1 auto;
        /* grow shrink basis */
    }
    
    .rua-content {
        flex: 6 1 auto;
    }
    
    .municipio-content {
        flex: 4 1 auto;
    }
    
    .numero-content {
        flex: auto 1 auto;
    }
    
    .bairro-content {
        flex: 4 1 auto;
    }
    
    .telefone-content {
        flex: 1 1 auto;
    }
    
    .email-content {
        flex: 1 1 auto;
    }
    
    .categoria-content {
        flex: 2 1 auto;
    }
    
    .controlador-content {
        flex: 2 1 auto;
    }
    
    label {}

<div class="box">
    <div class="inside-box">
        <form action="" class="form-group">
            <div class="row">
                <label class="lb" for="name">Razão Social</label>
                <input class="razao-social-content" type="text" id="name" placeholder="Informe o seu nome" required>
                <label class="lb" for="cnpj_distribuidor">CNPJ</label>
                <input class="cnpj-content" type="text" id="cnpj_distribuidor" placeholder="CNPJ" required>
            </div>
            <div class="row">
                <label for="rua">Rua</label>
                <input class="rua-content" type="text" id="rua" placeholder="Nome da rua" required>
                <label for="municipio">Município</label>
                <input class="municipio-content" type="text" id="municipio" placeholder="Nome do Município" required>
                <label for="numero">Número</label>
                <input class="numero-content" type="text" id="numero" placeholder="Número da Residência" required>
            </div>
            <div class="row">
                <label for="bairro">Bairro</label>
                <input class="bairro-content" type="text" id="bairro" placeholder="Nome do Bairro" required>
                <label for="uf">Estado</label>
                <input class="uf" type="text" id="uf" placeholder="Estado" required>
                <label for="cep">CEP</label>
                <input class="cep-content" type="text" id="cep" placeholder="CEP" required>
            </div>
            <div class="row">
                <label for="telefone1">Telefone</label>
                <input class="telefone-content" type="text" id="telefone1" placeholder="Telefone" required>
                <input class="telefone-content" type="text" id="telefone2" placeholder="Telefone" required>
                <input class="telefone-content" type="text" id="telefone3" placeholder="Telefone" required>
                <input class="telefone-content" type="text" id="telefone4" placeholder="Telefone" required>
            </div>
            <div class="row">
                <label for="email1">Email</label>
                <input class="email-content" type="text" id="email1" placeholder="Email" required>
                <input class="email-content" type="text" id="email2" placeholder="Email" required>
                <input class="email-content" type="text" id="email3" placeholder="Email" required>
                <input class="email-content" type="text" id="email4" placeholder="Email" required>
            </div>

            <div class="row">
                <label for="categoria">Categorias</label>
                <input class="categoria-content" type="text" id="categoria" placeholder="Informe as Categorias" required>
                <label for="data_constituicao">Data Da Constituição</label>
                <input class="data-content" type="date" id="data_constituicao" placeholder="Data da Constituição" required>
                <label for="data_cvm">Data da CVM</label>
                <input class="data-content" type="date" id="data_cvm" placeholder="Data do CVM" required>
            </div>
            <div class="row">
                <label for="controlador">Controlador</label>
                <input class="controlador-content" type="text" id="controlador" placeholder="Nome do Controlador" required>
                <label for="cnpj_controlador">CNPJ</label>
                <input class="cnpj-content" type="text" id="cnpj_controlador" placeholder="CNPJ" required>
            </div>
        </form>
    </div>
</div>

This image link shows how I want it to be

https://www.figma.com/file/nuLJYzwr2LtoJxt4rPKDaI/Untitled?node-id=0%3A1

Answer 1

Just wrap label and input inside a div and add :

.row > div {
    display: flex;
    flex-direction: column;
}