How to move a section up when checkbox is checked?

I was wondering how to move the "shipping method" section up when the "same as shipping address" checkbox is checked? Currently, when the box is checked, there is a large empty white space and I would like to know how to fix this. When the box is unchecked, the hidden form pops and and fills the white space so this part functions correctly. Thank you in advance!

.checkbox-custom, .radio-custom {
    margin: 0 auto;
    width: 40%;
    opacity: 0;
    position: absolute;   
}

.checkbox-custom, .checkbox-custom-label, .radio-custom, .radio-custom-label {
    display: inline-block;
    vertical-align: middle;
    margin: 5px;
    cursor: pointer;
}

.checkbox-custom-label, .radio-custom-label {
    position: relative;
}

.checkbox-custom + .checkbox-custom-label:before, .radio-custom + .radio-custom-label:before {
    content: '';
    background: #fff;
    border: 1px solid #717171;
    display: inline-block;
    vertical-align: middle;
    width: 20px;
    height: 20px;
    padding: 2px;
    margin-right: 10px;
    text-align: center;
}

.checkbox-custom:checked + .checkbox-custom-label:before {
    content: "\f00c";
    font-family: 'FontAwesome';
    font-size: 20px;
    color: #a1cdad;
}

.radio-custom + .radio-custom-label:before {
    border-radius: 50%;
}

.radio-custom:checked + .radio-custom-label:before {
    content: "\f00c";
    font-family: 'FontAwesome';
    font-size: 20px;
    color: #a1cdad;
}


.checkbox-custom:checked ~.input-box {
  visibility: hidden;
  opacity: 0;
}

.radioalign {
  margin: 0 auto;
  width: auto;
  text-align: left;
  display: table;
}

  <form class="form1">
      
      <div class="h6centeralign"><h6 class="h6style">Shipping Address</h6></div>  
      
    <div class="input-box">
      <input type="text" id="first-name" placeholder="John" data-type="name"/>
      <label for="first-name"><p>First Name</p></label>
    </div>
    
    <div class="input-box">
      <input type="text" id="last-name" placeholder="Smith" data-type="name"/>
      <label for="last-name"><p>Last Name</p></label>
    </div>
    
    <div class="input-box">
      <input type="text" id="phone-number" placeholder="555-555-555" data-type="number"/>
      <label for="phone-number"><p>Phone Number</p></label>
    </div>
      
    <div class="input-box">
      <input type="text" id="company" placeholder="Company" data-type="name"/>
      <label for="company"><p>Company Name</p></label>
    </div>  
      
    <div class="input-box">
      <input type="text" id="address" placeholder="123 Main Street" data-type="text"/>
      <label for="address" data-type="name"><p>Address</p></label>
    </div>
      
    <div class="input-box">
      <input type="text" id="city" placeholder="Everytown" data-type="text"/>
      <label for="city" data-type="name"><p>City</p></label>
    </div>
      
    <div class="input-box">
      <select id="card-type">
        <option><p>Texas</p></option>
        <option><p>Louisiana</p></option>
        <option><p>New Mexico</p></option>
        <option><p>Oklahoma</p></option>
      </select>
      <label for="card-type"><p>State</p></label>
    </div>
      
    <div class="input-box">
      <input type="text" id="zip" placeholder="12345" data-type="text"/>
      <label for="zip" data-type="text"><p>Address</p></label>
    </div>
      
    <div class="input-box">
      <select id="card-type">
        <option><p>United States</p></option>
      </select>
      <label for="card-type"><p>Country</p></label>
    </div>
      
    <div class="input-box">
      <input type="text" id="email" placeholder="johnsmith@gmail.com" data-type="email"/>
      <label for="email"><p>Email Address</p></label>
    </div>  
      
  </form>
    
  <form class="form2">
  
      <div class="h6centeralign"><h6 class="h6style">Billing Address</h6></div>

  <input id="checkbox-1" class="checkbox-custom" name="checkbox-1" type="checkbox" checked>
  <label for="checkbox-1" class="checkbox-custom-label">Same as shipping address</label>

    <div class="input-box">
      <input type="text" id="first-name" placeholder="John" data-type="name"/>
      <label for="first-name"><p>First Name</p></label>
    </div>
    
    <div class="input-box">
      <input type="text" id="last-name" placeholder="Smith" data-type="name"/>
      <label for="last-name"><p>Last Name</p></label>
    </div>
    
    <div class="input-box">
      <input type="text" id="phone-number" placeholder="555-555-555" data-type="number"/>
      <label for="phone-number"><p>Phone Number</p></label>
    </div>
      
    <div class="input-box">
      <input type="text" id="company" placeholder="Company" data-type="name"/>
      <label for="company"><p>Company Name</p></label>
    </div>  
      
    <div class="input-box">
      <input type="text" id="address" placeholder="123 Main Street" data-type="text"/>
      <label for="address" data-type="name"><p>Address</p></label>
    </div>
      
    <div class="input-box">
      <input type="text" id="city" placeholder="Everytown" data-type="text"/>
      <label for="city" data-type="name"><p>City</p></label>
    </div>
      
    <div class="input-box">
      <select id="card-type">
        <option><p>Texas</p></option>
        <option><p>Louisiana</p></option>
        <option><p>New Mexico</p></option>
        <option><p>Oklahoma</p></option>
      </select>
      <label for="card-type"><p>State</p></label>
    </div>
      
    <div class="input-box">
      <input type="text" id="zip" placeholder="12345" data-type="text"/>
      <label for="zip" data-type="text"><p>Address</p></label>
    </div>
      
    <div class="input-box">
      <select id="card-type">
        <option><p>United States</p></option>
      </select>
      <label for="card-type"><p>Country</p></label>
    </div>
      
    <div class="input-box">
      <input type="text" id="email" placeholder="johnsmith@gmail.com" data-type="email"/>
      <label for="email"><p>Email Address</p></label>
    </div>  
  </form>
    
   <form class="form3">
       <div class="h6centeralign"><h6 class="h6style">Shipping Method</h6></div>
       
       <div class="radioalign">
            <div>
                <input id="radio-1" class="radio-custom" name="radio-group" type="radio" checked>
                <label for="radio-1" class="radio-custom-label">Free Delivery (3-5 Days)<strong>  $0.00</strong></label>
            </div>
            <div>
                <input id="radio-2" class="radio-custom"name="radio-group" type="radio">
                <label for="radio-2" class="radio-custom-label">Standard Delivery (2-3 Days)<strong> $5.99</strong></label>
            </div>
            <div>
                <input id="radio-3" class="radio-custom" name="radio-group" type="radio">
                <label for="radio-3" class="radio-custom-label">Next Day Delivery<strong> $12.99</strong></label>
            </div>
        </div>
  </form>