Why checkbox checked does not work for element in different element / div?

I am trying to have hamburger menu in header and menu to toggle from side inside content, under header, but I have problem with it. I think that for some reason selector input[type="checkbox"]:checked ~ #sidebarMenu does not want to work if checkboox is in different div than #sidebarMenu itself.

#sidebarMenu, .sidebarMenu {
    height: 100%;
    width: 250px;
    transform: translateX(-270px);
    transition: transform 250ms ease-in-out;
    background: #fff;
    z-index: 1;
    display: flex;
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    vertical-align: middle;
    margin-top: 0px;
    box-shadow: 0px 2px 5px 5px rgb(0 0 0 / 16%), 0 0px 10px 1px rgb(0 0 0 / 12%);
}

input[type="checkbox"]:checked ~ #sidebarMenu {
    transform: translateX(0) !important;
}

This does not work:

<div class="container">     
<input type="checkbox" class="openSidebarMenu" id="openSidebarMenu">
<label for="openSidebarMenu" class="sidebarIconToggle">
<div class="spinner diagonal part-1"></div>
<div class="spinner horizontal"></div>
<div class="spinner diagonal part-2"></div>
</label>
</div>

<div id="content" class="site-content container clear">   
<div id="sidebarMenu">
<ul class="sidebarMenuInner">
</ul>
</div>
</div>

This works:

<div class="container">     
<input type="checkbox" class="openSidebarMenu" id="openSidebarMenu">
<label for="openSidebarMenu" class="sidebarIconToggle">
<div class="spinner diagonal part-1"></div>
<div class="spinner horizontal"></div>
<div class="spinner diagonal part-2"></div>
</label>
<div id="sidebarMenu">
<ul class="sidebarMenuInner">
</ul>
</div>
</div>