Label and input placement in an html form

Question

Hello, I’m studying HTML5 and CSS3 and I’m trying to stylize by positioning inputs/checkbox/combobox and their respective Abels.

Suppose I have the following code:

<form>
    <label for="Input1" id="lbl1">Input 1</label>
<input id="Input1" type="text">

<label for="Input2" id="lbl2">Input 2</label>
<input id="Input2" type="text">

<label for="Input3" id="lbl3">Input 3</label>
<input id="Input3" type="text">

<label for="combobox1" id="lbl4">Combobox 1</label>
<select id="combobox1">
    <option value="1">1</option>
    <option value="2">2</option>
    <option value="3">3</option>
    <option value="4">4</option>
</select>

<label for="combobox2" id="lbl5">Combobox 2</label>
<select id="combobox2">
    <option value="1">1</option>
    <option value="2">2</option>
</select>

<label for="Input4" id="lbl5">Input 4</label>
<input id="Input4" type="text">

<input type="checkbox" id="checkbox" value="selecionado"> <label for="checkbox" id="lbl6">Checkbox</label>

<label for="Input5"id="lbl7">Input 5</label>
<input id="Input5" type="text">
</form>

How do I make the page position in this style:

Answer 1

There are several solutions for this layout. One solution is to view the space in three columns and thus create three <div>, one for each column and <div> side by side with display flex. Then it is necessary to place each of the elements that were in the <form> in the appropriate column.

Example:

form {
  display:flex; /*O form tem os três divs logo é o que fica com o display flex*/
}

.coluna {
  padding:10px; /*cria um espaçamento para dentro nas colunas para não ficarem "coladas"*/
}

.coluna input, .coluna select {
  margin-bottom:20px; /*distanciar as caixas verticalmente dentro dos divs*/
}

<form>
  <div class="coluna"> <!-- aqui a coluna 1 -->
    <label for="Input1" id="lbl1">Input 1</label>
    <input id="Input1" type="text">
    
    <label for="combobox1" id="lbl4">Combobox 1</label>
    <select id="combobox1">
        <option value="1">1</option>
        <option value="2">2</option>
        <option value="3">3</option>
        <option value="4">4</option>
    </select>
    <br>
    
    <label for="Input4" id="lbl5">Input 4</label>
    <input id="Input4" type="text">
    
    <label for="Input5"id="lbl7">Input 5</label>
    <input id="Input5" type="text">
  </div>
  
  <div class="coluna"> <!-- aqui a coluna 2 -->
    <label for="Input2" id="lbl2">Input 2</label>
    <input id="Input2" type="text">
    <label for="combobox2" id="lbl5">Combobox 2</label>
    <select id="combobox2">
        <option value="1">1</option>
        <option value="2">2</option>
    </select>
    <br>
    <input type="checkbox" id="checkbox" value="selecionado"> <label for="checkbox" id="lbl6">Checkbox</label>
  </div>
  
  
  <div class="coluna"> <!-- aqui a coluna 3 -->
    <label for="Input3" id="lbl3">Input 3</label>
    <input id="Input3" type="text">
  </div>
  
</form>