Can I use selectors to control this checkbox hack across divs? - html

Question

I have a very basic checkbox hack I'm using for selecting different items.
It does exactly what I want it to do: namely, clicking on the label allows me to select the corresponding figure:
input[type="checkbox"] { display:none; }
.wrap { width: 50%; }
.wrap label { display: inline-block;}
.checker {background: red; padding: 50px;}
.checker figure { margin: 10px; display: inline-block; position: relative;}
.wrap input { display: none; }
.wrap input:checked ~ .checker { display: none; }
.wrap input:checked + label { color: blue; }
.wrap #check1cont:checked ~ .check1 {display: inline-block;}
.wrap #check2cont:checked ~ .check2 {display: inline-block;}
<div class="wrap">
<input type="checkbox" name="cont" id="check1cont">
<label class="check1cont" for="check1cont">Check 1</label>
<input type="checkbox" name="controllers" id="check2cont">
<label class="check2cont" for="check2cont">Check 2</label>
<figure class="checker check1">CHECK 1</figure>
<figure class="checker check2">CHECK 2</figure>
</div>
But I want the controllers/labels to be aligned on the left side, with the figures on the right. Ideally, I'd like to be able to do this with flex, so the labels are housed in a responsive, left-aligned div.
I've tried adding the divs with different sibling and child selectors, but I'm new to all of this, and I don't think I've gotten the right combination (or else I'm doing something else wrong, or else it's impossible).
Can anyone recommend a means of doing this?
Thank you in advance.

Answer 1

The hidden checkbox tricks works because the checkboxes themselves can be anywhere in relation to the labels. So put the checkboxes first, and the labels in a separate container following them, and you can control both the labels and the figures with the :checked state of the checkboxes.
.wrap { display:flex; width:50%; vertical-align:top;}
.wrap aside {vertical-align:top;}
.wrap label {white-space:nowrap; display: block;}
.checker {background: red; padding: 50px; vertical-align:top;}
.checker {margin: 10px; display: inline-block; position: relative;}
.wrap input { display: none; }
input:checked ~ main .checker { display: none; }
#check1cont:checked ~ aside .check1cont,
#check2cont:checked ~ aside .check2cont { color: blue; }
#check1cont:checked ~ main .check1,
#check2cont:checked ~ main .check2 {display: inline-block;}
<div class="wrap">
<input type="checkbox" name="cont" id="check1cont">
<input type="checkbox" name="controllers" id="check2cont">
<aside>
<label class="check1cont" for="check1cont">Check 1</label>
<label class="check2cont" for="check2cont">Check 2</label>
</aside>
<main>
<figure class="checker check1">CHECK 1</figure>
<figure class="checker check2">CHECK 2</figure>
</main>
</div>
Note: as was remarked in the comments, the code is a simplification of the real code, so I had to clean up the css a bit. You probably have to un-clean it up to make it work for the real code again!