I am having trouble with aligning my tables horizontally and displaying them one under the other. Despite using Bootstrap 4 classes, I'm encountering issues such as uneven table display or missing tables. Therefore, I am seeking assistance and providing the code where both tables exist in the same row.
<div class="mt-3 d-flex justify-content-center">
<div class="text-center p-2">
<table class="table table-dark table-striped w-auto">
<thead>
<tr class="bg-primary">
<th>Stop</th>
<th>(A)</th>
<th>(A)</th>
<th>(A)</th>
<th>(A)</th>
</tr>
</thead>
<tbody>
<tr>
<th scope="row">Lidzbark Warmiński</th>
<td>08:00</td>
<td>12:00</td>
<td>15:00</td>
<td>19:00</td>
</tr>
<tr>
<th scope="row">Kraszewo</th>
<td>08:20</td>
<td>12:20</td>
<td>15:20</td>
<td>19:20</td>
</tr>
<tr>
<th scope="row">Dobre Miasto</th>
<td>08:30</td>
<td>12:30</td>
<td>15:30</td>
<td>19:30</td>
</tr>
<tr>
<th scope="row">Olsztyn PKP</th>
<td>09:00</td>
<td>13:00</td>
<td>16:00</td>
<td>20:00</td>
</tr>
</tbody>
</table>
</div>;
<div class="text-center p-2">
<table class="table table-dark table-striped w-auto ">
<thead>
<tr class="bg-primary">
<th>Stop</th>
<th>(A)</th>
<th>(A)</th>
<th>(A)</th>
<th>(A)</th>
</tr>
</thead>
<tbody>
<tr>
<th scope="row">Olsztyn PKP</th>
<td>09:00</td>
<td>13:00</td>
<td>17:00</td>
<td>21:00</td>
</tr>
<tr>
<th scope="row">Dobre Miasto</th>
<td>09:30</td>
<td>13:30</td>
<td>17:30</td>
<td>21:30</td>
</tr>
<tr>
<th scope="row">Kraszewo</th>
<td>09:50</td>
<td>13:50</td>
<td>17:50</td>
<td>21:50</td>
</tr>
<tr>
<th scope="row">Lidzbark Warmiński</th>
<td>10:00</td>
<td>14:00</td>
<td>18:00</td>
<td>22:00</td>
</tr>
</tbody>
</table>
</div>;
</div>;