Toggle element visibility based on checkbox, when element to hide is in different div than the checkbox

Question

I am attempting to hide multiple elements using checkboxes and css. The checkboxes are in the ".leftbar" div, but the elements to hide are in the ".main" div. (More details momentarily...) I want this to be done in html and css only. It seems to work correctly when the div elements and the checkboxes are right next to each other, but apparently not with the format I currently have (below).

The ".leftbar" class-div is an element formatted to be a side navigation bar on the left side of the screen (not shown in the css here). The ".main", ".indent", ".calendar", and ".calendar_table" classes format their divs in the css, so that the table looks like a calendar, and so that everything inside of ".main" and ".indent" are aligned correctly with the ".leftbar".

ALL THE CODE IS INSIDE THE BODY TAG OF THE HTML (other than the css which is properly referenced by the html).

".leftbar" div (where the checkboxes are):

<div class="leftbar">
  <ul>
    <li>
      <input id="option1" class="show1" type="checkbox" checked />
      <label for="option1">Toggle1</label>
    </li>

    <li>
      <input id="option2" class="show2" type="checkbox" checked />
      <label for="option2">Toggle2</label>
    </li>

    <li>
      <input id="option3" class="show3" type="checkbox" checked />
      <label for="option3">Toggle3</label>
    </li>
  <ul>
</div>

".main" div (where the elements to toggle are):

<div class="main">
  <div class="indent">
    <div class="calendar">
      <div class="calendar_table">
        <table>
          <tr>
              <!--Needs to hide "Toggle Me 1" & "2" when "show1" checkbox is ':not(:checked)'-->
            <td><div class="toggle1"><p>Toggle Me 1</p></div></td>
            <td><div class="toggle1"><p>Toggle Me 2</p></div></td>
              <!--Needs to hide "Toggle Me 3" & "4" when "show2" checkbox is ':not(:checked)'-->
            <td><div class="toggle2"><p>Toggle Me 3</p></div></td>
            <td><div class="toggle2"><p>Toggle Me 4</p></div></td>
              <!--Needs to hide "Toggle Me 5" & "6" when "show3" checkbox is ':not(:checked)'-->
            <td><div class="toggle3"><p>Toggle Me 5</p></div></td>
            <td><div class="toggle3"><p>Toggle Me 6</p></div></td>
          </tr>
        </table>
      </div>
    </div>
  </div>
</div>

(the .leftbar div ends, then the .main div immediately begins. There is nothing between them.)

associated css (to toggle the display of the elements):

.show1:not(:checked) ~ .toggle1 {
  display:none;
}
.show2:not(:checked) ~ .toggle2 {
  display:none;
}
.show3:not(:checked) ~ .toggle3 {
  display:none;
}

My goal is to make so that "Toggle Me 1" and "Toggle Me 2" are hidden when "show1" is ':not(:checked)', and the same applies to the other "Toggle Me's" and their associated check boxes.

Just for a little more context for why I need this done: I am an instructor at a Martial Arts School. I created a calendar using a table element. Certain martial arts (toggle1 vs toggle 2, etc...) need to be hidden depending on what checkboxes are marked or not. The check boxes need to be on the left side navigation bar (leftbar), as it is by far the best spot to put the toggles. It simply makes sense for the page.