2 column layout with 1 aspect ratio container and a full height div

I'm trying to create a 2 column layout, with one column 2/3rds wide, and the second 1/3rd.

The first column should be taken up by a video container that maintains an aspect ratio of 4:3. I think I've done that correctly by setting the padding of the video container to 75%.

I'd like the 3rd column to contain a div that expands to the full height of the row. It doesn't seem able to.

I just wanted to ask if this was because the column layout gains its height from the video container (which in turn is based on it's width)? Or have I just overlooked something simple? I'd like to stop randomly adding 'height: 100%' to everything in the vague hope that it works and actually understand what I'm missing!

<div class="container">
  <div class="row">
    <div class="col-2-of-3">
      <div class="video-container">
        <div class="video">Column Containing 4:3 Video</div>    
      </div>
    </div>
    <div class="col-1-of-3">
      <div class="full-height-div">
        Div in column 2
      </div>
    </div>
  </div>
</div>

css

.container {
  border: 1px dotted red;
}

.row {
  background: #aeaeae;
  width: 100%;
  height: 100%;
}
.row::after {
  content: "";
  display: table;
  clear: both;
}

[class^="col-"] {
  height: 100%;
  float: left;
}
[class^="col-"]:not(:last-child) {
  margin-right: 10px;
}

.col-1-of-3 {
  width: calc((100% - 2 * 10px}) / 3);
}

.col-2-of-3 {
  width: calc(((100% - 2 * 10px) / 3) * 2 + 10px);
}

.video-container {
  height: 0;
  overflow: hidden;
  padding-top: 75%;
  position: relative;
  width: 100%;
}

.video {
  background: red;
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  text-align: center;
  color: #fff;
}

.full-height-div {
  max-width: 100%;
  height: 100%;
  border: 1px dotted #fff;
}

codepen: https://codepen.io/anon/pen/jxzMag?editors=1100