Как сделать, чтобы высота одной колонки зависила от второй?

Для того чтобы высота одной колонки зависела от другой, можно использовать различные подходы в HTML и CSS. Вот некоторые из них:

1. Использование таблиц:

Вы можете создать таблицу с двумя столбцами и установить свойство "height" для второго столбца, которое будет определять высоту обоих столбцов. Например:

<table>
  <tr>
    <td>Контент первой колонки</td>
    <td style="height: 200px;">Контент второй колонки</td>
  </tr>
</table>

2. Использование флекс-контейнера:

Вы можете создать контейнер с двумя дочерними элементами и установить свойство "flex" для дочерних элементов, чтобы второй элемент растягивался на всю доступную высоту контейнера. Например:

<div style="display: flex;">
  <div style="flex: 1;">Контент первой колонки</div>
  <div style="flex: 1; background-color: gray;">Контент второй колонки</div>
</div>

3. Использование грид-контейнера:

Вы можете создать контейнер с двумя дочерними элементами и использовать свойства "grid-template-rows" и "grid-auto-rows" для установки высоты строк. Например:

<div style="display: grid; grid-template-columns: 1fr; grid-template-rows: 1fr; grid-auto-rows: minmax(0, 1fr);">
  <div style="background-color: yellow;">Контент первой колонки</div>
  <div style="background-color: gray;">Контент второй колонки</div>
</div>

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