Как выровнять в таблице информацию в столбцах по высоте одного из столбцов?

Question

[Антон Кулявец]

Здравствуйте.
Есть ситуация.
Таблица состоит из двух столбцов.
В левом столбце блоки, который меняются с каждой страницей сайта по высоте.
В правом столбце блок с еще одной таблицей, статично урезанной по высоте, потому что если не урезать статично - он растягивает сайт вниз..
Как можно сделать с помощью html & css, чтобы можно было задать правому столбцу высоту, не превышающую левый столбец? И при этом не ограничивать левый, если в левом информация идет дальше вниз - чтобы правый столбец тоже под нее подстраивался.

Таблица создана с помощью дивов или td/tr, не списком.

Comments

[Lynn «Кофеман»]

Код в студию.

[Антон Кулявец]

Алексей Тен,
CSS:

.main-left-block-container {
    background: #faf9f0;
    border: 1px solid #c0c0c0;
    -webkit-border-radius: 10px 0 0 0;
    -moz-border-radius: 10px 0 0 0;
    border-radius: 10px 0 0 0;
    -webkit-box-sizing: border-box;
    -moz-box-sizing: border-box;
    box-sizing: border-box;
    display: table-cell;
    width: 63%;
    text-align: center;
}

.main-right-block-container {
    display: table-cell;
    background: #faf9f0;
    border: 1px solid #c0c0c0;
    border-left: none;
    -webkit-border-radius: 0 10px 0 0;
    -moz-border-radius: 0 10px 0 0;
    border-radius: 0 10px 0 0;
    -webkit-box-sizing: border-box;
    -moz-box-sizing: border-box;
    box-sizing: border-box;
    text-align: center;
    width: 37%;
    vertical-align: top;
}

Ниже - то, что не должно выпирать ниже левого контейнера...

.main-right-block-reviews-container {
    -webkit-box-sizing: border-box;
    -moz-box-sizing: border-box;
    box-sizing: border-box;
    padding: 0 5px 5px 5px;
}

.main-right-block-reviews {
    border: 1px solid #c0c0c0;
    -webkit-border-radius: 10px;
    -moz-border-radius: 10px;
    border-radius: 10px;
    margin: 0 auto;
    max-height: 505px;
    max-width: 375px;
}

.main-right-block-reviews-hidden {
    margin: 5px;
    overflow: auto;
    max-height: 495px;
    max-width: 365px;
}

HTML:

<table>
        <tr class="main-table-row">
            <td class="main-left-block-container cf" itemscope itemtype="https://schema.org/Product">
            </td>
            <td class="main-right-block-container cf">
                <div class="main-right-block-reviews-container cf">
                    <div class="main-right-block-reviews">
                    </div>
                </div>
            </td>
        </tr>
        </table>

Answer 1

[Eugene Chefranov]

Попробуйте сделать на flex

Comments

[Антон Кулявец]

Как?

Answer 2

[Дмитрий Христоев]

пример?

Comments

[Антон Кулявец]

Указан к комментарию

Answer 3

[Антон Кулявец]

Поможет кто-нибудь?