Radio Button Animation not working when adding Div - html

Question

I am trying to style a group of radio buttons and also have the animation work. You will see if I delete the <div> with class="group55" from the code, then the animation works just fine. When I add that element back in, it seems like the CSS I have is not being recognized any longer. What am I doing wrong? The ultimate goal would be to have the "group55" <div> surround the group of radio buttons and still have the animation keep working.
.toggle1:checked ~ .panel1 {
left: 0px;
}
.panel1 {
transition:all 500ms ease;
width: 300px;
height: 100px;
border: 1px solid black;
position: absolute;
left: -300px;
}
<div class="group55">
<input type="radio" class="toggle1" id="toggle1" name="group" checked/>
<input type="radio" class="toggle2" id="toggle2" name="group" />
<div class="panel1">
panels 1
</div>
(Also available at jsFiddle.)

Answer 1

This not work because you need to put the panel as sibling of the input, to make the sibling selector (~) work.
Fix HTML:
<div class="group55">
<input type="radio" class="toggle1" id="toggle1" name="group" checked />
<input type="radio" class="toggle2" id="toggle2" name="group" />
<div class="panel1">
panels 1
</div>
</div>
Check: https://jsfiddle.net/lmgonzalves/85f57nd8/1/

Answer 2

If you try to add the "group55" surround the group of radio buttons,your animation will not work.Click here to see you code again the code that you wish to do
Because the class ".toggle1:checked ~ .panel1" will only work when the ".toggle1" is checked and both ".toggle1" class and ".panel1" class must have inside the "group55" like this.....
<div class="group55">
<input type="radio" class="toggle1" id="toggle1" name="group" checked />
<input type="radio" class="toggle2" id="toggle2" name="group" />
<div class="panel1">
panels 1
</div>
</div>
Click here to see the answer with another way

Answer 3

Something i also did was setting the left property of your panel 1 class to 4px and it worked, because in css properties like left and right work in opposite way so when you said left -300px it's actually the left but normally it ought to go right. Check http://jsfiddle.net/85f57nd8/4/
.toggle1:checked ~ .panel1 {
left: 0px;
}
.panel1 {
transition:all 500ms ease;
width: 300px;
height: 100px;
border: 1px solid black;
position: absolute;
left: 4px;
}