How to hide a checkbox if another checkbox is checked using css? [duplicate]

I'm having problems getting a checkbox to hide another div using CSS when that checkbox is selected. For example, I have two checkboxes

• Checkbox 1
• Checkbox 2

When checkbox 1 is selected, it's suppose to hide checkbox 2 but it doesn't. Any ideas on what I'm doing wrong?

Here's what I've done so far

#cover_photo_set_featured input:checked ~ #one_image_feature_image label {display:none}

<div id="cover_photo_set_featured">
<input type="checkbox" id="acf-block_601d8b4a91a27-field_5f8bec0fb8152-sfi" name="acf-block_601d8b4a91a27[field_5f8bec0fb8152][]" value="sfi">Checkbox 1
</div>
<div id="one_image_feature_image">
<label>
<input type="checkbox" id="acf-block_601d8b6591a28-field_5f8cf27e7bf5f-one_img_set_feat_img" name="acf-block_601d8b6591a28[field_5f8cf27e7bf5f][]" value="one_img_set_feat_img">Checkbox 2
</label>
</div>