Как сохранить размещение столов c при переключении между столами

Question

Первый пост, так что извиняюсь за любые не-nos ...

У меня есть две таблицы - одна, которая записывает древесину, которая у меня есть в наличии, и другая, которая перечисляет проекты, которые будут использовать эту древесину.

Я установил переключатель для изменения того, какая из таблиц отображается, но это заставляет позиции таблиц перемещаться в их вертикальном положении. Одна таблица больше другой, поэтому я понимаю, почему она меняется ... но я не уверен, как лучше всего контролировать эти изменения. Я бы хотел остановить это движение, если это вообще возможно.

ПРИМЕЧАНИЕ. Я новичок в HTML / CSS / JavaScript, поэтому там, вероятно, много беспорядка. Я пытался организовать это, комментарии и т. Д. c.

JSFiddle: [https://jshttps://jsfiddle.net/L6sdgcrq/

/*
Start table styling block
*/
.tableStats {
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    height: 500px;
}

.tableContainer {
    width: 95%;
    display: flex;
    justify-content: center;
}

#woodTable {
    width: 1200px;
    max-height: 400px;
    display: table;
    justify-content: center;
    border-radius: 15px;
    border-collapse: unset;
    margin-top: 15px;
    margin-bottom: auto;
    padding: 10px !important;
    background-color: lightgray;
    border-bottom: none;
}

#projectTable {
    width: 1200px;
    max-height: 400px;
    display: none;
    justify-content: center;
    border-radius: 15px;
    border-collapse: unset;
    margin-top: 15px;
    margin-bottom: auto;
    padding: 10px !important;
    background-color: lightgray;
    border-bottom: none;
}

th {
    padding: 15px;
    margin: 10px;
    border-bottom: 2px solid black;
    border-radius: 2px;
}

td {
    text-align: center;
    padding: 5px;
}

tr {
    padding: 10px;
}

tr:last-child, td:last-child {
    border-bottom: none;
}

td:nth-child(n+1) {
    border-left: 2px solid black;
}

th:first-child, td:first-child {
    border-left: none;
}

.smaller {
    width: 50px;
}

/*
End table styling block
*/

Вы Посмотрим, о чем я говорю, если вы прокрутите верхнюю часть окна в выполненной части.