HTML Collapsible Button - How to make div appear after button?

I am trying to make a collapsible button with pure HTML and CSS. Here is what I have:

#hidden {
  display: none;
  height: 100px;
  background: red;
}

 :checked+#hidden {
  display: block;
}

<input type="checkbox" id="my_checkbox" style="display:none;">
<div id="hidden"></div>
<label for="my_checkbox">Show/hide</label>

This works. However, I want the hidden div to come after the button instead of before. When I move the div to after the checkbox label, it does not work.

How can I fix this ?

Thanks!