Filter breaks when i move the checkboxes

Ive been using a code similar to this one to multi filter some elements, but whenever i try to move the checkboxes the filter stops working and im not sure why.

.items>[data-type] {
  display: none;
}

input[name=a]:checked~.items div[data-type=a] ,
input[name=b]:checked~.items div[data-type=b] ,
input[name=c]:checked~.items div[data-type=c] {
  display: block;
}

<input type="checkbox" name="a" style="display: inline-block;"> A <br>
<input type="checkbox" name="b" style="display: inline-block;"> B <br>
<input type="checkbox" name="c" style="display: inline-block;"> C <br>
<hr>
<div class="items">
  <div data-type="a">A</div>
  <div data-type="b">B</div>
  <div data-type="c">C</div>
</div>

Ive tried putting it in a div with a position but that doesnt seem to work. The checkboxes move but the filter stops working entirely.

Example of what i tried:

.items>[data-type] {
  display: none;
}

input[name=a]:checked~.items div[data-type=a] ,
input[name=b]:checked~.items div[data-type=b] ,
input[name=c]:checked~.items div[data-type=c] {
  display: block;
}
.checkboxes{
  position: absolute;
  left: 150px;
  top: 40px;
}

<div class="checkboxes">
  <input type="checkbox" name="a" style="display: inline-     block;"> A <br>
  <input type="checkbox" name="b" style="display: inline-block;"> B <br>
  <input type="checkbox" name="c" style="display: inline-block;"> C <br>
</div>

<hr>

<div class="items">
  <div data-type="a">A</div>
  <div data-type="b">B</div>
  <div data-type="c">C</div>
</div>

Solution

The problem is from sibling combinator ~

<style>
.items > [data-type] {
  display: none;
}

input[name=a]:checked ~ .items div[data-type=a],
input[name=b]:checked ~ .items div[data-type=b],
input[name=c]:checked ~ .items div[data-type=c] {
  display: block;
}
.checkboxes {
  position: absolute;
  left: 150px;
  top: 40px;
}
</style>

<div class="container"> 
  <input type="checkbox" name="a" style="display: inline-block;"> A <br>
  <input type="checkbox" name="b" style="display: inline-block;"> B <br>
  <input type="checkbox" name="c" style="display: inline-block;"> C <br>

  <hr>

  <div class="items">
    <div data-type="a">A</div>
    <div data-type="b">B</div>
    <div data-type="c">C</div>
  </div>
</div>

But incase if ur using nest checkboxes inside a separate container. You need to go for javascript for toggle visibility.