how to make the checkbox hack work with input within the target div [duplicate]

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 ?

I was pointed to this question automatically but I don't even understand why so I'm asking the same question again.