How can I stop these ‘s using space when I hide the labels?

I have 5 radio buttons, every one, when it is pressed, calls the function that hides/shows the input labels that I need.

I used document.getElementById("id").style.display="none"; and it works, but it still takes space.

I want the inputs of the form to fill the space above them when the elements above them are hidden. I think the problem is the <br> tags to separate the inputs, how can I fix this?

JS function:

function showInsert() {
    document.getElementById("id").style.display="none";
    document.getElementById("nome").style.display="initial";
    document.getElementById("provincia").style.display="initial";

    document.getElementById("idLabel").style.display="none";
    document.getElementById("nomeLabel").style.display="initial";
    document.getElementById("provinciaLabel").style.display="initial";
}

HTML Inputs (are in a form if it matters):

<label for="provincia" id="idLabel">ID:</label><br>
<input type="text" name="id" id="id" placeholder="ID da ricercare" /><br>

<label for="provincia" id="nomeLabel">Nome:</label><br>
<input type="text" name="nome" id="nome" placeholder="Nome da ricercare" /><br>

<label for="provincia" id="provinciaLabel">Provincia:</label><br>
<input type="text" name="provincia" id="provincia" placeholder="Provincia da ricercare" /><br>

Answer

<br> is meant to be used for line-breaks in text, not for general layouts.

As an alternative, you could set the form to display: flex; instead:

function showInsert() {
  document.getElementById("id").style.display = "none";
  document.getElementById("nome").style.display = "initial";
  document.getElementById("provincia").style.display = "initial";

  document.getElementById("idLabel").style.display = "none";
  document.getElementById("nomeLabel").style.display = "initial";
  document.getElementById("provinciaLabel").style.display = "initial";
}

form {
  display: flex;
  flex-direction: column;
  width: 200px;
}

<form>
  <label for="provincia" id="idLabel">ID:</label>
  <input type="text" name="id" id="id" placeholder="ID da ricercare" />

  <label for="provincia" id="nomeLabel">Nome:</label>
  <input type="text" name="nome" id="nome" placeholder="Nome da ricercare" />

  <label for="provincia" id="provinciaLabel">Provincia:</label>
  <input type="text" name="provincia" id="provincia" placeholder="Provincia da ricercare" />
</form>

<button onclick="showInsert()">Show Insert</button>