Как растянуть левый блок по высоте относительно правого?

Question

[stasyan1]

Высота основного блока зависит от содержимого дочерних блоков, статической высоты дочерних блоков не существует.
Мне нужно иметь одинаковую высоту правого и левого блоков без кода js / jquery, если это возможно. А также без использования table, flexbox, grid layouts.

Я попытался установить position: absolute для левого блока. Но высота желтого блока не растягивается, поскольку зависит от содержимого контента.

<div class="card-wrapper">
  <div class="card big">
    <div class="card__header"></div>
    <div class="card__main">
      Vestibulum lectus mauris ultrices eros in cursus turpis massa. Adipiscing elit ut aliquam purus sit amet luctus venenatis. Vestibulum lectus mauris ultrices eros in cursus turpis massa. Adipiscing elit ut aliquam purus sit amet luctus venenatis.
    </div>
    <div class="card__footer">
      Vestibulum lectus mauris ultrices eros in cursus turpis massa. Adipiscing elit ut aliquam purus sit amet luctus venenatis. Vestibulum lectus mauris ultrices eros in cursus turpis massa. Adipiscing elit ut aliquam purus sit amet luctus venenatis.
    </div>
  </div>
  <div class="right-col">
    <div class="card">
      <div class="card__header"></div>
      <div class="card__main">
        Vestibulum lectus mauris ultrices eros in cursus turpis massa. Adipiscing elit ut aliquam purus sit amet luctus venenatis. Vestibulum lectus mauris ultrices eros in cursus turpis massa. Adipiscing elit ut aliquam purus sit amet luctus venenatis.
      </div>
      <div class="card__footer">
        Vestibulum lectus mauris ultrices eros in cursus turpis massa. Adipiscing elit ut aliquam purus sit amet luctus venenatis. Vestibulum lectus mauris ultrices eros in cursus turpis massa. Adipiscing elit ut aliquam purus sit amet luctus venenatis.
      </div>
    </div>
    <div class="gap"></div>
    <div class="card__little">
      <div class="card__header"></div>
      <div class="card__main">
        Vestibulum lectus mauris ultrices eros in cursus turpis massa. Adipiscing elit ut aliquam purus sit amet luctus venenatis. Vestibulum lectus mauris ultrices eros in cursus turpis massa. Adipiscing elit ut aliquam purus sit amet luctus venenatis.
      </div>
      <div class="card__footer">
        Vestibulum lectus mauris ultrices eros in cursus turpis massa. Adipiscing elit ut aliquam purus sit amet luctus venenatis. Vestibulum lectus mauris ultrices eros in cursus turpis massa. Adipiscing elit ut aliquam purus sit amet luctus venenatis.
      </div>
    </div>
  </div>
</div>

.card-wrapper {
  display: inline-block;
  border: 1px solid #ababab;
  border-radius: 10px;
  padding: 10px;
  box-sizing: border-box;
  font-family: Arial, serif;
  height: 100%;
  width: 100%;
}

.big {
  width: 66%;
  float: left;
}

.card {
  border: 1px solid black;
}

.card__header {
  width: 100%;
  background: green;
  height: 100px;
}

.card__main {
  background: yellow;
}

.card__footer {
  background: blue;
}

.gap {
  padding-top: 10px;
}

.right-col {
  width: 33%;
  float: right;
}

Comments

[Ankhena]

Так не выйдет.

Либо флексы и гриды либо js либо таблицы.

[Даниил]

Ankhena, Вызов принят.

[Ankhena]

Даниил, честно говоря, не вижу в вашем варианте того, что нужно ТС.

[Даниил]

Ankhena, :D очень жаль, надеюсь stasyan1 не забудет надеть очки

[Flyheck]

Ankhena, нет, у него все соответствует поставленной задаче

[Ankhena]

Flyheck, Даниил, ай какие молодцы, случайно зашли комментировать один древний вопрос )))

Читаем задачу

Как растянуть левый блок по высоте относительно правого?

Смотрим в то, как выглядит исходник

[Даниил]

Ankhena, хорошая задача потому что, грех не поделиться) А насчёт того какой блок имеется ввиду, можно воспринять по разному. Тут уже автор пусть уточнит что ему нужно. Тот вариант, что предложил я, решает часто встречающуюся задачу размещения по колонкам, но с поддержкой аж ie6 :D

[Ankhena]

Даниил, да, верно