Remove extra spaces occupied by a hidden elements in HTML form

I have a form with several elements. There is a check box in the form. If I checked in the check box then the some of form elements got hidden as per requirement but the space occupied by those elements not eliminated. I have tried with below code.

window.addEventListener('load', () => { 
      document.getElementById('cbox1').addEventListener('click', (e) => {
        const show = e.target.checked;
        document.getElementById("end1").style.visibility = show ? 'visible' : 'hidden';
        document.getElementById("tap1").style.visibility = show ? 'visible' : 'hidden';
        document.getElementById("atnd1").style.visibility = show ? 'visible' : 'hidden';
        document.getElementById("lbl1").style.visibility = show ? 'visible' : 'hidden';
        document.getElementById("lbl2").style.visibility = show ? 'visible' : 'hidden';
      });
      });

form[id=fbd1] {
  width : 250px;
  height : 320px;
  position: absolute;
  top: 71%;
  left: 16%;
  background-color: #fff;
  box-shadow: 0 0 20px;
  text-align:center;
  padding-left :10px;
  padding-top :5px;
  border-radius: 8px;
  resize:vertical;
  overflow:auto;
  }
  
  #lbl1,#end1,#tap1,#lbl2,#atnd1 {
    visibility : hidden;
  }

<iframe name="dummyframe" id="dummyframe" style="display: none;"></iframe>
<form id="fbd1" action="submitscript.php" target="dummyframe">
    <textarea id="tbd1" placeholder="Enter your details"></textarea>
    <br>
    <label>Start Time</label>&nbsp;&nbsp;<input id="strt1" type="time">&nbsp;&nbsp;&nbsp;<input id="cbox1" type="checkbox">
    <br><br>
    <label id="lbl1">End Time</label>&nbsp;&nbsp;<input id="end1" type="time">&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
    <br>
    <br>
    <textarea id="tap1" placeholder="Enter plan details"></textarea>
    <br>
    <label id="lbl2">Named By</label>&nbsp;&nbsp;<input id="atnd1" type="text">
    <br><br>
    <input type="submit" id="btn10" value="submit">
  </form>

display: none; will do the job...

// no js needed, see CSS part

body {
  font-family : Arial, Helvetica, sans-serif;
  font-size   : 16px;
  margin      : 0;
  padding     : 0;
  }
#fbd1 {
  width         : 20rem;
  height        : fit-content;
  background    : #fff;
  box-shadow    : 0 0 1.2rem;
  padding-top   : .5rem;
  border-radius : .5rem;
  margin        : 2rem;
  padding       : 1rem 0 .6rem 0;
  }
#fbd1 label , 
#fbd1 button {
  display : block;
  margin  : 1rem auto;
  width   : 80%;
  }
#fbd1 label textarea {
  width     : 100%;
  max-width : 100%;
  min-width : 100%;
  font-size : 1rem;
  }
  #fbd1 label span {
  display : inline-block;
  width   : 5rem;
  }
#fbd1 input[type="text"] {
  width   : 100%;
  }
#fbd1:has(#cbox1:not(:checked)) label.showOption {
  display : none;
  }

<form id="fbd1">
  <label>
    <textarea id="tbd1" placeholder="Enter your details"></textarea>      
  </label>
  <label>
    <span>Start Time</span>
    <input id="strt1" type="time">
    <input id="cbox1" type="checkbox">
  </label>
  <label class="showOption">
    <span>End Time</span>
    <input id="end1" type="time">
  </label>
  <label  class="showOption">
    <textarea id="tap1" placeholder="Enter plan details"></textarea>
  </label>
  <label class="showOption">
    Named By
    <input id="atnd1" type="text"> 
  </label>
  <button>submit</button>
</form>