How to show hidden div when input box is checked

Question

I used a checkbox to hide the content in the div.

I want to show when a checkbox is checked.

But when the checkbox is checked, the hidden content is not visible.

I want to solve it only with css.

label:hover, label:active {
    text-decoration: underline;
 }

#forgot-password-toggle {
    display: none;
}

.forgot-password-content {
    height: 5%;
    width: 100%;
    opacity: 0;
    visibility: hidden;
    cursor: pointer;
}

#forgot-password-toggle:checked ~ * .forgot-password-content {
    display: inline;
    height: 5%;
    width: 100%;
    opacity: 1;
    pointer-events: auto;
    cursor: auto;
    visibility: visible;
}

<label for="forgot-password-toggle">
  <input id="forgot-password-toggle" type="checkbox" checked="">
  forget password?</label> <br>

<div class="forgot-password-content">
  <input id="email" type="email" placeholder="Email" required>
  <button onclick="sendEmail()">Send</button>
</div>

Thank you for kindly letting me know.

Answer 1

Here is the solution. I have just modified the HTML a bit and the css.

label:hover, label:active {
    text-decoration: underline;
 }

#forgot-password-toggle {
    display: none;
}

.forgot-password-content {
    height: 5%;
    width: 100%;
    opacity: 0;
    visibility: hidden;
    cursor: pointer;
}

#forgot-password-toggle:checked + label + .forgot-password-content {
    display: inline;
    height: 5%;
    width: 100%;
    opacity: 1;
    pointer-events: auto;
    cursor: auto;
    visibility: visible;
}

   <input id="forgot-password-toggle" type="checkbox">
   <label for="forgot-password-toggle">forget password?</label>

<div class="forgot-password-content">
  <input id="email" type="email" placeholder="Email" required>
  <button onclick="sendEmail()">Send</button>
</div>