Stretch left block's height relative to right block's height

Question

Screenshot link.

Didn't use table, flexbox and grid layout. Only used float layout.

Main block height depends on children's content, there is no static height of child blocks.

I need to have the same heights of right and left block without JavaScript/jQuery code, if it's possible. Is there anybody who had the same problems?

I tried to set position: absolute for the left side block. But the content doesn't stretch in yellow blocks. And I don't have any ideas.

.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;
}

<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>