Чтобы настроить зависимость высоты одной колонки от высоты другой без использования JavaScript, можно использовать CSS Grid.
Добавьте обертку со стилем `display: grid` для элементов "left" и "right". Укажите количество колонок и установите свойство `grid-template-columns` так, чтобы ширина первой колонки была фиксированной (например, `200px`) и остальное пространство занимала вторая колонка, которая имеет значение `1fr`.
Также добавьте свойство `grid-template-rows` для контроля высоты. Установите значение `minmax(1px, auto)` для второй строки, чтобы она занимала столько места, сколько требуется для ее содержимого.
Обновленный код будет выглядеть следующим образом:
```html
<div style="display: grid; grid-template-columns: 200px 1fr; grid-template-rows: 1fr;">
<div id="left" style="background-color: red">
1<br>
2<br>
3<br>
4<br>
5<br>
6<br>
7<br>
8<br>
</div>
<div id="right" style="background-color: blue">
1<br>
2<br>
3<br>
</div>
</div>
```
Теперь элемент "left" будет иметь высоту, равную высоте элемента "right", и при необходимости можно прокручивать содержимое внутри него.