I'm trying to display the div tag when the checkbox is checked. Everything is working, but when I move tag down about a few lines, it stops working. If I put the tab next to the input tag then it works fine.

css

#toggle-content-box{
display:none;
}
#mycheckbox:checked ~ #toggle-content-box{
 display:block;
height:100px;

}

If I place the div underneath the line then it works perfectly.

 <input type="checkbox"  name="file_id"  id="mycheckbox" value="">
 <div id="toggle-content-box">This div will display when checkbox above is checked</div>

But for some reason, I need to move this div down about 10 lines from the line, then it stops working. The div is not showing when the checkbox is checked.