Saudações, Eu consegui fazer com display flex a seguinte formatação.
Porem quando eu tento fazer uma versão para 768px, não consigo desmembrar as 4 divs que compõem os elementos do display flex, segue o código.
<div class="dados-novo-paciente" >
<div class="campos campo-nome">
<label for="nome">Nome:</label>
<input id="nome" type="text" placeholder="digite aqui o nome do paciente">
</div>
<div class="campos peso">
<label for="peso">Peso(kg):</label>
<input id="peso" type="text" placeholder="digite aqui o peso do paciente">
</div>
<div class="campos altura">
<label for="altura">Altura(m):</label>
<input id="altura" type="text" placeholder="digite aqui a altura do paciente">
</div>
<div class="campos botao">
<button id="botao-adicionar" >Adicionar</button>
</div>
</div>
.dados-novo-paciente {
display: flex;
align-items: flex-end;
justify-content: space-between;
}
.campos {
display: flex;
flex-direction: column;
width: 20%;
}
.campo-nome {
width: 35%;
}
Como os campos estão dentro de uma div que está sendo usada para organizar horizontalmente, eu gostaria de deixar o nome pegando 100% da largura, mas se ajusta quando saio dessa resolução, tive que tirar do display flex e fazer com float.
Talvez eu precise manipular o dom com javascript para alterar conforma a resolução.