Comment mettre deux tableaux horizontalement

bonjour a tous
j ai un soucis avec mon code css
j aimerais mettre deux tableaux sur une page en horizontal
malheureusement celui ci se mets en verticalement
es ce que quelqu un peux m aider
vous en remerciant a l avance

voici mon code
css
.box {
display: flex;
justify-content: space-between;
}
html
<div class="box">
<div><table border="1">
<tbody>
<tr>
<th>SEMAINE</th>
<th>DATES</th>
<th>option</th>
<th>disponibilite</th>
</tr>

<tr>
<th>1</th>
<td>du au </td>
<td></td>
<td><span style="color: #ff0000;">reserve</span></td>
</tr>

<tr>
<th>2</th>
<td>du au </td>
<td></td>
<td><span style="color: #ff0000;">reserve</span></td>
</tr>

<tr>
<th>3</th>
<td>du au </td>
<td></td>
<td><span style="color: #ff0000;">reserve</span></td>
</tr>

<tr>
<th>4</th>
<td>du au </td>
<td></td>
<td><span style="color: #ff0000;">reserve</span></td>
</tr>

<div class="box">
<div><table border="1">
<tbody>
<tr>
<th>SEMAINE</th>
<th>DATES</th>
<th>option</th>
<th>disponibilite</th>
</tr>

<tr>
<th>1</th>
<td>du au </td>
<td></td>
<td><span style="color: #ff0000;">reserve</span></td>
</tr>

<tr>
<th>2</th>
<td>du au </td>
<td></td>
<td><span style="color: #ff0000;">reserve</span></td>
</tr>

<tr>
<th>3</th>
<td>du au </td>
<td></td>
<td><span style="color: #ff0000;">reserve</span></td>
</tr>

<tr>
<th>4</th>
<td>du au </td>
<td></td>
<td><span style="color: #ff0000;">reserve</span></td>
</tr>

Bonjour,
Quand tu ouvres des balises, c'est mieux si tu les fermes à la fin.
C'est pas mal aussi de mettre des espaces ou tabulations au début des lignes pour marquer les niveaux d'imbrications des éléments.

Après, dans ton cas précis, tu devrais aussi te documenter sur le fonctionnement et comportement des propriétés "flex". Il y a ce qu'il faut sur ce site.

Voici:

<style>
.box {
display: flex;
justify-content: space-between;
}
</style>
<div class="box">
    <table border="1">
            <tr>
                <th>SEMAINE</th>
                <th>DATES</th>
                <th>option</th>
                <th>disponibilite</th>
            </tr>
            <tr>
                <th>1</th>
                <td>du au </td>
                <td/>
                <td>
                    <span style="color: #ff0000;">reserve</span>
                </td>
            </tr>
            <tr>
                <th>2</th>
                <td>du au </td>
                <td/>
                <td>
                    <span style="color: #ff0000;">reserve</span>
                </td>
            </tr>
            <tr>
                <th>3</th>
                <td>du au </td>
                <td/>
                <td>
                    <span style="color: #ff0000;">reserve</span>
                </td>
            </tr>
            <tr>
                <th>4</th>
                <td>du au </td>
                <td/>
                <td>
                    <span style="color: #ff0000;">reserve</span>
                </td>
            </tr>
        </table>
        <table border="1">
            <tr>
                <th>SEMAINE</th>
                <th>DATES</th>
                <th>option</th>
                <th>disponibilite</th>
            </tr>
            <tr>
                <th>1</th>
                <td>du au </td>
                <td/>
                <td>
                    <span style="color: #ff0000;">reserve</span>
                </td>
            </tr>
            <tr>
                <th>2</th>
                <td>du au </td>
                <td/>
                <td>
                    <span style="color: #ff0000;">reserve</span>
                </td>
            </tr>
            <tr>
                <th>3</th>
                <td>du au </td>
                <td/>
                <td>
                    <span style="color: #ff0000;">reserve</span>
                </td>
            </tr>
            <tr>
                <th>4</th>
                <td>du au </td>
                <td/>
                <td>
                    <span style="color: #ff0000;">reserve</span>
                </td>
            </tr>
        </table>
</div>