CSS for show/hide div based on radio element checked/unchecked

Question

I'm trying to show/hide a div using the following code-

<label class="paper outer">           
    <div class="inner">
                            
     </div>
      <input type="radio" name="clickedChoice">
</label>

.inner{
    position:absolute;
    width: 30px;
    right:5px;
    top:5px;
    bottom: 5px;
}

input[name="clickedChoice"] ~ .inner{ 
    display: none;
}

input[name="clickedChoice"]:checked ~ .inner{ 
    display: block !important;
}

But .inner div remains visible. What did I miss here?

Answer 1

<label class="paper outer">           
<input type="checkbox" name="clickedChoice">
<div class="inner">
    Lorem ipsum dolor sit amet consectetur adipisicing elit. Inventore minus 
consectetur assumenda ducimus aliquam minima placeat maiores natus impedit 
dolorum quod ipsam odio laboriosam, repellendus commodi, quam, saepe 
voluptatibus ad!
</div>
</label>
<style>
.inner{
position:absolute;
width: 30px;
right:5px;
top:5px;
bottom: 5px;
}

input[name="clickedChoice"] ~ .inner{ 
display: none;
}

input[name="clickedChoice"]:checked ~ .inner{ 
display: block !important;
}
</style>