Revealing text in table cells when checked

To put in a nutshell, I need to do an html page with a checkbox and a table, where checkbox is responsible for revealing text in table cells. When tag is checked, hidden information must reveal in every cell. I've made a simple code without any other tags to see if this would work, but something goes wrong and .hidden text doesn't display. Here is it:

<head>
    <style>
        input[type=checkbox]:checked ~ .hidden {
        display:inline-block;
        }
        .hidden {
        display:none;
        }
    </style>
</head>
<body>
    <input type="checkbox">
    <table border=2>
        <tr>
            <td><div class="hidden"><p>text to reveal</p></div></td>
            <td> smth </td>
            <td> smth </td>
        </tr>
    </table>
</body>

I need to do this code without JS Hope for your help

Solution

Because .hidden is not located next to your checkbox, you have to refer the table first and then the .hidden element, which is a child of <table>.

<head>
    <style>
        input[type=checkbox]:checked ~ table div.hidden {
          display:inline-block !important;
        }
        .hidden {
        display:none;
        }
    </style>
</head>
<body>
    <input type="checkbox">
    <table border=2>
        <tr>
            <td><div class="hidden"><p>text to reveal</p></div></td>
            <td> smth </td>
            <td> smth </td>
        </tr>
    </table>
</body>