CSS :checked not working

Trying to create a menu using pure css by the toggle selected method. The problem is the toggle and the menu are in two different div and it's not working. How do I fix this? I want to be able to click the menu button and have the menu slide from the left side of the screen

<div id="main">
<div class="class1">            
    <input type="checkbox" id="toggle-left">
    <label for="toggle-left"></label>
</div>  

<div class="menu">
    <div class="sidebar">
    </div>
</div>

</div>

Here is the css

#toggle-left { 
    display: none 
}

#toggle-left:checked ~  #main > .menu > .sidebar { 
    left: 0%; display: block !important 
}

.sidebar { 
    position: fixed;
    left: -70%;
    -webkit-transition: all 0.15s ease-out 0s;
    -moz-transition: all 0.15s ease-out 0s;
    transition: all 0.15s ease-out 0s;  
    width: 70%;
    background: #111111;
    z-index: 9999999 !important;
    overflow-y: hidden;
    display: none;
    width: 295px;
}

#toggle-left + label { 
    height: 3px;
    width: 30px;
    top: 30px;
    right: 3%;
    cursor: pointer;
    content: '';
    display: block;
    margin: 12px 3%;  
    background: #fff;
    box-shadow: 0 9px 0 #fff, 0 -9px 0 #fff;  
    -webkit-transition: all 0.15s ease-out 0s;
    -moz-transition: all 0.15s ease-out 0s;
    transition: all 0.15s ease-out 0s;
    position: absolute;
    z-index: 999999999999999999; 
}