Use checkbox with label to toggle dropdown menu

I'm trying to use a checkbox input with a label to toggle the visibility (display) of a dropdown navigation menu. When the menu is shown, I need to move the label to the right in order to be able to still click it since it would otherwise be behind the menu, making it impossible to close.

<div class="topnav">
  <label for="dropdown-toggle" id="dropdown-toggle-label"><i class="fas fa-bars"></i></label>
  <input type="checkbox" id="dropdown-toggle">
  <ul class="dropdown">
    ...
  </ul>
</div>

However, with the way I have set it up, I'm trying to use the + selector to

1. show the .dropdown menu when the checkbox is checked
2. move the label out of the way to have it clickable

This is not possible of course, since not both can directly follow the input.

.topnav .dropdown {
  display: none;
  position: absolute;

  z-index: 10;
  width: 33%;
}

#dropdown-toggle-label {
  display: block;
}

#dropdown-toggle-label:hover {
  cursor: pointer;
}

/* move the checkbox out of the way of the menu */
/* this should be done with the label instead */
#dropdown-toggle:checked {
  margin-left: 36%;
}

/* display the menu when the checkbox is checked */
#dropdown-toggle:checked + .dropdown{
  display: block;
}

If at all possible, I'd like to solve this issue without using JavaScript. Should there be any important info missing let me know and I'll provide it.