HTML Espaço lateral entre objetos de uma <div>

[DiegoRLS]

Fala galera,

Estou precisando de ajuda pra algo que acredito que seja simples de resolver, tenho um formulário e posicionei os campos um do lado do outro, mas ficam muito pertos atrapalhando a organização, o que eu queria era só aumentar o espaço lateral entre os objetos e deixar alinhados confome exemplo da foto anexada.

Quem pode dar uma ajuda agradeço.

 

<!--DESIGN CSS-->
<style type="text/css">
#label {
    color: #d6d6d6;
}

#calculadora input[type=text], select {
  width: 20%;
  padding: 12px 20px;
  color: black;
  margin: 8px 0;
  display: inline-block;
  border: 1px solid #ccc;
  border-radius: 4px;
  box-sizing: border-box;
}
  
#calculadora input[type=number], select {
  width: 20%;
  color: #191515;
  padding: 12px 20px;
  margin: 8px 0;
  display: inline-block;
  border: 1px solid #ccc;
  border-radius: 4px;
  box-sizing: border-box;
}

#calculadora input[type=button] {
  width: 50%;
  background-color: #073BF7 ;
  color: white;
  padding: 14px 20px;
  margin: 8px 0;
  border: none;
  border-radius: 4px;
  cursor: pointer;
  box-shadow:0 5px 0 #0635de;
}

#calculadora input[type=button]:hover {
  background-color: #4286f4;
  box-shadow:0 5px 0 #3b77db;
}

#calculadora div {
  border-radius: 5px;
  padding: 0px;
  color: white;
}
 
</style>

<!--FUNÇÃO CALCULADORA-->
<script type="text/javascript">
$().ready(function(){
  var botao = $(".botao");
  
  botao.on("click", function(){
  	var pessoa = $("#pessoa").val();
  	var equipamento = $("#equipamento").val();
  	var velame = $("#velame").val();
  	var calculo = ((parseFloat(pessoa) + parseFloat(equipamento)) * 2.2) / parseFloat(velame);
    var cargaAlar = calculo.toFixed(2); 
    $("#resultado").val(cargaAlar);

<!-- VERIFICAR NIVEL DE EXPERIENCIA -->    
  switch (true) {
	  case (cargaAlar <= 1.1): $("#experiencia").val("Iniciante"); break;
	  case (cargaAlar > 1.1 && cargaAlar <= 1.3): $("#experiencia").val("Intermediário"); break; 
	  case (cargaAlar > 1.3 && cargaAlar <= 1.5): $("#experiencia").val("Avançado"); break;
	  case (cargaAlar > 1.5): $("#experiencia").val("Experiente"); break;
  default:
    console.log('Desculpe, houve erro no cálculo, tente novamente.');
 		} 
	});
});
</script>

<!--FORMULARIO DE PREENCHIMENTO E RESULTADO-->
<div action="" id="calculadora" method="post" name="calcform">
	<div >
		<label id="label">Peso da Pessoa (kg):</label>
		<label id="label">Peso do Equipamento (kg):</label>
		<label id="label">Tamanho do Velame (ft):</label>
	<br>
		<input id="pessoa" name="pessoa" type="number" value="70" />
		<input id="equipamento" name="equipamento" type="number" value="12" />
		<input id="velame" name="velame" type="number" value="190" />
    <br>
		<input class="botao" type="button" value="Calcular" />
	<br>
		<label id="label">Carga Alar:</label>
		<label id="label">Nível de Experiência:</label>
	<br>	
		<input disabled="" id="resultado" type="text" value="" />
		<input disabled="" id="experiencia" type="text" value="" />
	</div>
</div>

 

[Adriano_web]

@DiegoRLS Tudo bem? Eu consegui adicionando Flexbox no seu CSS e ajustando a sua estrutura HTM. Dê uma estudada sobre Flexbox ou Grid layout é bem conveniente . O seu código alterado se encontra nesse link basta dar um "Run": https://www.w3schools.com/code/tryit.asp?filename=GLZQVU2LN7NS

 

Boas festas!  

[DiegoRLS]

2 horas atrás, Adriano_web disse:

@DiegoRLS Tudo bem? Eu consegui adicionando Flexbox no seu CSS e ajustando a sua estrutura HTM. Dê uma estudada sobre Flexbox ou Grid layout é bem conveniente . O seu código alterado se encontra nesse link basta dar um "Run": https://www.w3schools.com/code/tryit.asp?filename=GLZQVU2LN7NS

 

Boas festas!  

Obrigado @Adriano_web por ajudar e pela sugestão de estudo.

 

Boas festas!