Input's forms positioning-CodePudding

I'm newbie in CSS and need to copy a model as exercise. I'm having trouble setting up the forms, because I want label above input and in the same rectangle. Feel free to give tips on best practices for not repeating code or something Thanks in advance.

Expected:

My result:

My HTML code:

<form method="post">
        <div >
            <label for="nome">Nome do Paciente</label>
            <input type="text" name="nome" id="nome" placeholder="ex: Thiago Martins Prado">
        </div>
        <div >
            <label for="data">Data da Consulta</label>
            <input type="date" name="data" id="data">
        </div>
        <div >
            <label for="peso">Peso (kg)</label>
            <input type="number" name="peso" id="peso" step="0.1" placeholder="ex: 70.6">
        </div>
        <div >
            <label for="altura">Altura (m)</label>
            <input type="number" name="altura" id="altura" step="0.1" placeholder="ex: 1.83">
        </div>
        <div >
            <button type="submit" >Confirmar</button>
            <button type="reset" >Limpar</button>
        </div>
    </form>

My CSS code:

form {
    margin: 0 40px;
}

label {
    font: 18px 'Gill Sans', 'Gill Sans MT', Calibri, 'Trebuchet MS', sans-serif;
}

input {
    border-radius: 4px;
    padding: 10px;
    margin-bottom: 20px;
}

input#nome {
    display: grid;
    width: 100%;
}

input#data {
    display: block;
}

input#peso {
    display: block;
}

input#altura {
    display: block;
}

::placeholder {
    color: #ADB5B8;
}

CodePudding user response：

Use flex-box for this, for more info about flex-box read here . here's an example of you code

form {
    margin: 0 40px;
}

label {
    font: 18px 'Gill Sans', 'Gill Sans MT', Calibri, 'Trebuchet MS', sans-serif;
}

input {
    border-radius: 4px;
    padding: 10px;
    margin-bottom: 20px;
}

input#nome {
    display: grid;
    width: 100%;
}

input#data {
    display: block;
}

input#peso {
    display: block;
}

input#altura {
    display: block;
}

::placeholder {
    color: #ADB5B8;
}

.flex-container{
  display:flex;
  justify-content: space-between;
  align-items:center;
}

<form method="post">
        <div >
            <label for="nome">Nome do Paciente</label>
            <input type="text" name="nome" id="nome" placeholder="ex: Thiago Martins Prado">
        </div>
        <div >
          <div >
            <label for="data">Data da Consulta</label>
            <input type="date" name="data" id="data">
        </div>
        <div >
            <label for="peso">Peso (kg)</label>
            <input type="number" name="peso" id="peso" step="0.1" placeholder="ex: 70.6">
        </div>
        <div >
            <label for="altura">Altura (m)</label>
            <input type="number" name="altura" id="altura" step="0.1" placeholder="ex: 1.83">
        </div>
        <div >
            <button type="submit" >Confirmar</button>
            <button type="reset" >Limpar</button>
        </div>
    </form>