Como colocar um campo ao lado do outro?

Boa noite amigo. Ótima pergunta.
Inicialmente ja recomendo assistir o curso de CSS:
https://www.devmedia.com.br/curso/curso-css/2213

Vou deixar também este exemplo no meu github:
https://github.com/gerssonmg/begin-html/tree/master/HTML_formulario_001

Pode ser feito da seguinte maneira:
Fiz dois exemplos. Um ficando lado a lado, e outro um a baixo do outro.

Note que utilizei uma:

class="lado-a-lado"

e outra

class="cima-baixo"

Estas duas foram definidas no meu arquivo CSS.

<form class="lado-a-lado">
<label>Nome:</label>
<input type="text" name="nome">

<label>Sobrenome:</label>
<input type="text" name="sobrenome">
</form>

<form class="cima-baixo">
<label>Nome:</label>
<input type="text" name="nome">

<label>Sobrenome:</label>
<input type="text" name="sobrenome">
</form>


Código CSS:
A propriedade display: inline
Faz com que os elementos fiquem na mesma linha
A propriedade display: block
Faz com que os elementos fiquem um a baixo do outro

Obs: Pode ter varições, vai depender do elemento que esta estilizando.


.lado-a-lado input {
display: inline;
margin-right: 30px
}

.lado-a-lado {
margin-bottom: 30px;
}

.cima-baixo input {
display: block;
}