Gostaria de saber se tem como dividir o formulario, tipo: nome, telefone e email do lado esquerdo e cep, cidade, estado, endereço, numero do lado direito ao inves de deixar um embaixo do outro tentei dividir eles em fildset dentro do form e alterar a posição no css com o { position: absolut } mas não me pareceu a maneira correta.
<body>
<main>
<form >
<fieldset class="dados-pessoal">
<label for="nomesobrenome">Nome e Sobrenme </label>
<input type="text" id="nomesobrenome" class="input-padrao" required>
<label for="email">Email</label>
<input type="email" id="email" class="input-padrao" required placeholder="exemplo@email.com">
<label for="telefone">Telefone</label>
<input type="tel" id="telefone" class="input-padrao" required placeholder="(XX) XXXXX-XXXX">
<label for="mensagem">Mensagem</label>
<textarea class="input-padrao" id="mensagem"></textarea required> </textarea>
</fieldset>
<fieldset class="dados-enderoco">
<label for="endereco">Enderoço</label>
<input type="text" id="endereco" class="input-padrao" required>
<label for="numero">Numero</label>
<input type="text" id="numero" class="input-nao-padrao" required>
<label for="cidade">Cidade</label>
<input type="text" id="cidade" class="input-padrao" required>
<label for="estado">Estado</label>
<input type="text" id="estado" class="input-nao-padrao" required>
<label for="cep">CEP</label>
<input type="text" id="cep" class="input-padrao" required>
</fieldset>
<fieldset class="estilo">
<legend>Como entrar em contato?</legend>
<label class="checkbox" for="radio-email"><input type="radio" name="contato" value="email" id="radio-email">Email</label>
<label class="checkbox" for="radio-telefone"><input type="radio" name="contato" value="telefone" id="radio-telefone">Telefone</label>
<label class="checkbox" for="zap-radio"><input checked type="radio" name="contato" value="whatsapp" id="zap-radio">WhatsApp</label>
</fieldset>
<fieldset class="estilo">
<legend>Escolha seu tingimento</legend>
<select>
<option>Eucalipto</option>
<option>Cebola</option>
<option>Goiaba</option>
</select>
</fieldset>
<fieldset>
<legend class="tamanho">Escolha seu tamanho</legend>
<select>
<option>Kids</option>
<option>PP</option>
<option>P</option>
<option>M</option>
<option>G</option>
<option>GG</option>
</select>
</fieldset>
<label><input checked class="checkbox" type="checkbox"> Gostaria de resceber novidades por email?</label>
<input type="submit" value="Enviar formualrio" class="enviar">
</form>
</main>
</body>
</html>main{
width: 940px;
margin: 1em auto;
}
form{
margin: 0 0 0 0;
}
form label, form legend{
display: block;
font-size: 1.5em;
margin: 0 0 0.5em;
}
.input-padrao{
display: block;
margin: 0 0 2em;
padding: 1.5em 2em;
width: 30%;
}
.input-nao-padrao{
display: block;
margin: 0 0 2em;
padding: 1.5em 2em;
width: 10%;
}
.checkbox{
margin: 2em 0;
}
.enviar{
width: 35%;
padding: 1.5em 0 ;
background: grey;
color: white;
border: none;
font-size: 18px;
font-weight: bold;
border-radius: 5px;
transition: 3s background all;
}
.enviar:hover{
background: darkgray;
transform: scale(1.2);
}
.dados-enderoco{
display: block;
position: absolute;
right: 32em;
top: 1em;
width: 16em;
}
