checkbox hack with input within div failing

Here is my html :

<div id="blabla" class="control-me">
  <label for="toggle">the label</label>
  <input type="checkbox" id="toggle">
</div>

and my CSS :

.control-me {
  border: #222222;
  background-color: aqua;
}

#toggle:checked ~ .control-me {
  border: #cd0a0a;
  background-color: #cd0a0a;
}

#toggle {
  opacity: 100;
}

This is based on the checkbox hack and neatly summarized in that jsFiddle.

I would expect the div to turn from aqua to red when I check the checkbox but it doesn't.

Why and how to make it work ?