Show div when checkbox id checked but under the all checkboxes

I have a form containing 20 checkbox.

I want be able to shoe the content of a div when a checkbox is cheked. I got a result like that

<input type="checkbox" name="mycheckbox" id="mycheckbox1" value="0" />
<div id="toggle-content1">
This content should appear when the checkbox is checked
</div>
<input type="checkbox" name="mycheckbox" id="mycheckbox2" value="0" />
<div id="toggle-content2">
This content should appear when the checkbox is checked
</div>

#toggle-content1{
display:none;
}
#mycheckbox1:checked ~ #toggle-content1{
  display:block;
  height:100px;
}
#toggle-content2{
display:none;
}
#mycheckbox2:checked ~ #toggle-content2{
  display:block;
  height:100px;
}

But if you give it a try jsfiddle, you'll notice that the first checkbox move the second one(when opened the div), is there a way to leave the checkbox in one row and display the divs on the others?

The css world is new to me, there is a way to write that code for 20 checkbox without write the css for every div?