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>