HTML/CSS: Horizontal checkbox layout with label underneath

I just started coding a small page for myself after not doing any web design for a couple of years. As I now learned, laying out the page with tables is not state-of-the-art anymore (not sure if it ever really was).

Now I am trying to layout my page with CSS but couldn't find anything on

1. How to align 7 checkboxes horizontally and put the corresponding label centered below the checkboxes?


2. How to align 2 selects horizontally and put the corresponding label centered above the selects?

The initial pure table-code was the following:

    .form fieldset {
        display: table;
        border: 1px solid #c6c7cc;
        border-radius: 5px;
    }
    .form label {
        display: table-cell;
        text-align: right;
        padding: 5px;
    }
    .form input, .form select {
        display: table-cell;
    }
    .form .cssRow {
        display: table-row;
    }
    .form .submit {
        display: table-cell;
        caption-side: bottom;
        display: table-caption;
        text-align: center;
    }

<table>
        <tr>
            <td align="right">Name</td>
            <td align="left">
                <input name="name" type="text">
            </td>
        </tr>
        <tr>
            <td align="right">Day(s) of week</td>
            <td align="center">
                <table>
                    <tr>
                        <td align="center">
                            <input type="checkbox" name="day[]" value="mo" checked>
                        </td>
                        <td align="center">
                            <input type="checkbox" name="day[]" value="tu" checked>
                        </td>
                        <td align="center">
                            <input type="checkbox" name="day[]" value="we" checked>
                        </td>
                        <td align="center">
                            <input type="checkbox" name="day[]" value="th" checked>
                        </td>
                        <td align="center">
                            <input type="checkbox" name="day[]" value="fr" checked>
                        </td>
                        <td align="center">
                            <input type="checkbox" name="day[]" value="sa" checked>
                        </td>
                        <td align="center">
                            <input type="checkbox" name="day[]" value="su" checked>
                        </td>
                    </tr>
                    <tr>
                        <td align="center">Mo</td>
                        <td align="center">Tu</td>
                        <td align="center">We</td>
                        <td align="center">Th</td>
                        <td align="center">Fr</td>
                        <td align="center">Sa</td>
                        <td align="center">Su</td>
                    </tr>
                </table>
            </td>
        </tr>
        <tr>
            <td align="right">Validity</td>
            <td align="center">
                <table>
                    <tr>
                        <td>Valid from</td>
                        <td>Valid to</td>
                    </tr>
                    <tr>
                        <td>
                            <select>
                                <option>January</option>
                                <option>February</option>
                            </select>
                        </td>
                        <td>
                            <select>
                                <option>January</option>
                                <option>February</option>
                            </select>
                        </td>
                    </tr>
                </table>
            </td>
        </tr>
        <tr>
            <td align="center" colspan="2">
                <input type="submit" name="submit" value="Refresh">
            </td>
        </tr>
    </table>

My CSS attempt so far looks like this:

    <div class="form">
    <fieldset>
        <legend>Search</legend>
        <div class="cssRow">
            <label for="name">Name</label>
            <input name="name" type="text" size="30" maxlength="30">
        </div>
        <div class="cssRow">
            <label for="day[]">Day(s) of week</label>
            <input name="day[]" type="text" value="ToDo" size="30" disabled>
        </div>
        <div class="cssRow">
            <label>Validity</label>
            <input type="text" value="ToDo" size="30" disabled>
        </div>
        <div class="submit">
            <input type="submit" name="submit" value="Suchen">
        </div>
    </fieldset>
</div>

To illustrate my problem, I created the following JSFiddle: http://ift.tt/1By0mRu

Any suggestions are welcome, although I prefer a simple solution, as I am just (re)learning HTML and CSS.

Thanks.