<form class="formulario">
<div class="campo">
<label class="campo__label" for="nombre">Nombre</label>
<input class="campo__field" type="text" placeholder="Tu Nombre" id="nombre">
</div>
<div class="campo">
<label class="campo__label" for="email">E-mail</label>
<input class="campo__field" type="email" placeholder="Tu E-mail" id="email">
</div>
<div class="campo">
<label class="campo__label" for="mensaje">Mensaje</label>
<textarea class="campo__field campo__field--textarea" id="mensaje"></textarea>
</div>
<div class="campo">
<div class="campo__boton">
<input type="submit" value="enviar" class="boton boton--primario">
</div>
</div>
</form>
Aquí lo que tengo en css:
.campo {
display: flex;
margin-bottom: 2rem;
}
.campo__label {
flex: 0 0 9rem;
text-align: right;
padding-right: 2rem;
font-weight: 700;
}
.campo__field {
flex: 1;
padding: 1rem;
border: 1px solid var(--gris);
border-radius: .5rem;
}
.campo__field--textarea {
height: 20rem;
}
<form class="formulario">
<div class="campo">
<label class="campo__label" for="nombre">Nombre</label>
<input class="campo__field" type="text" placeholder="Tu Nombre" id="nombre">
</div>
<div class="campo">
<label class="campo__label" for="email">E-mail</label>
<input class="campo__field" type="email" placeholder="Tu E-mail" id="email">
</div>
<div class="campo">
<label class="campo__label" for="mensaje">Mensaje</label>
<textarea class="campo__field campo__field--textarea" id="mensaje"></textarea>
</div>
<div class="campo">
<div class="campo__boton">
<input type="submit" value="enviar" class="boton boton--primario">
</div>
</div>
</form>
.campo {
display: flex;
margin-bottom: 2rem;
}
.campo__label {
flex: 0 0 9rem;
text-align: right;
padding-right: 2rem;
font-weight: 700;
}
.campo__field {
flex: 1;
padding: 1rem;
border: 1px solid var(--gris);
border-radius: .5rem;
}
.campo__field--textarea {
height: 20rem;
}