How to target an element using input type checkbox

I have a dropdown type list that will get hidden after specific device width and by default dropdown box will be visible nd user cant be able to collapse it.
Default state for input is also hidden.

Suppose the device width is 804px,and the dropdown gets hidden and input gets visible. So, By clicking the input the user can see the contents of the dropdown.
But for some reason I’m unable to target the dropdown box using the input field. Wasted a whole day on this….

html:

<div class="hireDevs">
        <div class="headers">
            <h2>Hire Developer Team</h2>
            <label for="team-lists">
                <input type="checkbox" class="add-lists" id="team-lists" hidden>
                <i class="ri-add-fill"></i>
            </label>
        </div>
        <div class="team-lists">
            <a href="#">Android App Developers</a>
            <a href="#">iOS App Developers</a>
            <a href="#">Flutter App Developers</a>
        </div>

css:

input[type="checkbox"]:checked ~ .team-lists{
    display: flex;
    height: 430px;
}