Как показать скрытый div, когда он не рядом с input?

.invis { display: none; } 
 
#off:checked ~ .show-off { display: block; } 
#on:checked  ~ .show-on  { display: block; } 
 
/* Ненужный декорасьон */ 
 
.radio { display: none; } 
 
.custom-rad { 
  display: inline-block; 
  vertical-align: middle; 
  position: relative; 
   
  width: 16px; 
  height: 16px; 
  background-color: #ddd; 
  border: 1px solid #999; 
  border-radius: 50%; 
} 
 
.lab { 
  display: inline-block; 
  width: 80px; 
  margin-right: 20px; 
  border-right: 2px solid #090; 
  cursor: pointer; 
} 
 
.lab:hover { color: #045acf; border-color: #045acf; } 
 
#on:checked  ~ label .radio-on::after, 
#off:checked ~ label .radio-off::after { 
  content: ""; 
  position: absolute; 
  width: 10px; 
  height: 10px; 
  top: 3px; 
  left: 3px; 
  border-radius: 50%; 
  box-shadow: 1px 1px 3px #333; 
  background-color: #070; 
  background-image: linear-gradient(#0a0, #080, #050) 
}

<div> 
  <input id="off" class="radio" type="radio" name="true"> 
  <input id="on"  class="radio" type="radio" name="true"> 
 
  <label for="on"  class="lab"><span class="custom-rad radio-on" ></span> on </label> 
  <label for="off" class="lab"><span class="custom-rad radio-off"></span> off</label> 
 
  <hr> 
 
  <div class="invis show-on" >= [on] </div> 
  <div class="invis show-off">= [off]</div> 
</div>