Как сделать так, чтобы ширина нижней таблице соответствовала ширине другой таблицы
В моём сайте есть три таблицы. Две идут в верхнем ряду, а третья идёт в нижнем(смотреть код). Как сделать так, чтобы ширина ячеек нижней таблицы соответствовала ширине ячейкам верхней таблице(первой) при изменении расширения экрана?
td,
th {
border: 1px solid black;
}
.tables-wrapper {
display: flex;
align-items: flex-start;
}
td {
font-size: 120%;
}<div class="tables-wrapper">
<table>
<caption style="font-size: 130%">
Бетон
</caption>
<tbody>
<thead>
<tr>
<td>
Тип Бетона
</td>
<td>
Цена за 1м2
</td>
</tr>
</thead>
<tr>
<td>
Бетон M-100 / В 7.5 с пластификатором
</td>
<td>
2800р
</td>
</tr>
<tr>
<td>
Бетон M-150 / В 10 с пластификатором
</td>
<td>
2900р
</td>
</tr>
<tr>
<td>
Бетон M-200 / В 15 с пластификатором
</td>
<td>
3100р
</td>
</tr>
<tr>
<td>
Бетон M-250 / В 20 / W4-8
</td>
<td>
3400р
</td>
</tr>
<tr>
<td>
Бетон M-300 / В 22.5 / W4-8
</td>
<td>
3600р
</td>
</tr>
<tr>
<td>
Бетон M-350 / В 25 / W4-8
</td>
<td>
3800р
</td>
</tr>
</tbody>
</table>
<table>
<caption style="font-size: 130%">
Песок
</caption>
<tbody>
<thead>
<tr>
<td>
Тип Песка
</td>
<td>
Цена за тонну
</td>
</tr>
</thead>
<tr>
<td>
Песок
</td>
<td>
1100р
</td>
</tr>
</tbody>
</table>
</div>
<div>
<table>
<caption style="font-size: 130%">
Бетон2
</caption>
<tbody>
<thead>
<tr>
<td>
Тип бетона
</td>
<td>
Цена за тонну
</td>
</tr>
</thead>
<tr>
<td>
...
</td>
<td>
...
</td>
</tr>
</tbody>
</table>
</div>