:checked not working in css - php

Question

Context:
I've been working on the front and back-end for a fun startup company for the last month. There is a profile page on the website for users who are logged in. As shown below in its default state:
Default state
Using the 'checkbox' hack / trick, by clicking on the setting icon (as referenced through the label tag in the css below) The logged in user can open a side menu, with settings and options for their account as shown below:
The menu expanded
The problem:
Clicking on the profile text is supposed to create a drop-down menu so that the user can upload their own profile picture. I was hoping to do this through the same checkbox hack as before. However, when clicking on the profile text (referenced as h1), the checkbox is ticked but the background (referenced as .sidebar h1) doesn't change its colour to red. I think this is because of a problem with the :checked function in css, because when I click on the profile text I can see the checkbox become checked and unchecked.
Of note:
I can use javascript, but it's really not preferable (the person I'm working for isn't a big fan.)
Here is the whole file: https://pastebin.com/E0H6HgRe
CSS
.sidebar {
background-color: white;
position: fixed;
top: 0;
width: 0;
bottom: 0;
}
input#slide-sidebar[type="checkbox"] {
display: none;
}
input#slide-sidebar:checked ~ .sidebar{
left: 0;
width: 201;
z-index: 3;
-webkit-transition: width 2s;
transition: width 2s;
}
.setting {
font-size: 100px;
color:black;
z-index: 0;
background-color:white;
position: fixed;
left: 18.8%;
width: 100%;
}
input#slide-sidebar:not(:checked) ~ .sidebar {
width: 0;
-webkit-transition: width 2s;
transition: width 2s;
}
h1{
color: #222;
font-size: 20;
letter-spacing: 1px;
text-decoration: none;
text-transform: uppercase;
color:black;
left: 0px;
opacity:0;
position: fixed;
top: 200px;
}
input#slide-sidebar:checked ~ .sidebar h1 {
opacity: 1;
transition: opacity 1s ease-in;
-webkit-transition: opacity 1s ease-in;
}
input#slide-sidebar:not(:checked) ~ .sidebar h1 {
opacity: 0;
transition: opacity 0.5s ease-out;
-webkit-transition: opacity 0.5s ease-out;
}
input#profile-pic:checked ~ .sidebar h1 {
background-color: red;
}
Php (html running inside php)
echo "<div class='main-wrap'><input id='slide-sidebar' type = 'checkbox' role='button' /> <label for='slide-sidebar' class='setting'><span><i class = 'fa fa-cog'></i></span></label><div class='sidebar'>
<input id='profile-pic' type = 'checkbox' role='button' /><label for='profile-pic'><span><h1> Profile</h1></span></label></div>";