Changing order of flexbox when input is checked?

I was was wondering if it's possible to change the order of my flexbox if the checkbox gets checked. I can get it to work if I don't use the form or div wrapper. Is it possibe to order the whole form container to order 4 once checkbox is checked? I am currently targeting -

input:checked+label, input:checked {
  order: 4;
}

How can I add form element to the css selectors?

    <div class="list__container">
      <form>
        <input id="item1" type="checkbox" />
        <label for="item1">Create a to-do list</label>
      </form>
     /* Or DIV*/
      <div>
        <input id="item2" type="checkbox" />
        <label for="item2">Prepare for <strong>the test</strong></label>
      </div>
      
      <h1 className="todo"></h1>
      <h1 className="completed"></h1>

    </div>

.list__container {
  display: flex;
  flex-direction: column;
}

.todo {
  order: 1;
}

.done {
  order: 2;
}

input:checked+label, input:checked {
  order: 4;
}

input:not(checked)+label, input:not(checked) {
  order: 2
}

Thanks!