Need help adding an overflow scroll-bar to a "checkbox" input type

New to HTML/CSS, so please pardon any misuse of terms or poor phrasing.

I'm trying to add an overflow scroll-bar to a checkbox drop-down, the end use of which will be a laterally-scrolling image gallery that can be hidden by clicking on some text. In other words, I'd like to toggle a <div> to show and hide content on a page.

Currently, I'm able to click on some text and hide/show a table of images. What I'm having trouble with is enclosing the table <div> with an overflow <div>, which would allow the user to scroll side to side within the toggled table (that's the idea at least). I've written out, essentially, what I'm trying to do below, with the dysfunctional code:

Ideal HTML

<label for="my_checkbox"><h3>Show/hide</h3></label>
<input type="checkbox" id="my_checkbox" style="display:none;">

<div>
<div class="horizScroll">
<div class="horizTable">
    <horizArticle>
        <img src ="my_image.png">
    </horizArticle>
    <horizArticle>
        <img src ="my_image.png">
    </horizArticle>
</div>
</div>
</div>

Ideal CSS

.horizScroll {
        width: 100%;
        height: 100%;
        overflow-x: hidden;
        overflow-y: hidden;
}

.horizTable {
        display: none;
        table-layout: fixed;
        width: 100%
}

horizArticle {
        width: 300px;
        height: 100px;
        display: table-cell;
        vertical-align: middle;
        text-align: center;

input[type="checkbox"]:checked ~ .horizTable{
    display: table;
}

input[type="checkbox"]:checked ~ .horizScroll{
    overflow-x: scroll;
}

I've fiddled with this for a couple hours, but I haven't been able to get the table display and the overflow bar to co-exist simultaneously using the checkbox method. So I'm hoping someone here has the magic bullet to fix what I'm trying to accomplish. Below is the CSS/HTML that already works.

Working HTML

<label for="my_checkbox"><h3>Show/hide</h3></label>
<input type="checkbox" id="my_checkbox" style="display:none;">

<div class="horizTable">
    <horizArticle>
        <img src ="my_image.png">
    </horizArticle>
    <horizArticle>
        <img src ="my_image.png">
    </horizArticle>
</div>

Working CSS

.horizScroll {
        width: 100%;
        height: 100%;
        overflow-x: scroll;
        overflow-y: hidden;
}

.horizTable {
        display: none;
        table-layout: fixed;
        width: 100%
}

horizArticle {
        width: 300px;
        height: 100px;
        display: table-cell;
        vertical-align: middle;
        text-align: center;

input[type="checkbox"]:checked + .horizTable{
    display: table;
}