<section class="example1">
  <content class="col"></content>
  <aside class="col"></aside>
</section>

<section class="example2">
  <content class="col">
    <h2>CSS, Or:</h2>
  </content>
  <aside class="col">
    <h2>How I Learned to Stop Worrying and Love the Flexbox.</h2>
  </aside>
</section>

<ol>
  <li>to example 1 <span></span> </li>
  <li>to example 2 <span></span></li>
</ol>  

section {
  display: flex;
  max-width: 900px;
  margin-bottom: 1em;
}

.example1 content {
  flex: 2;
}
.example1 aside {
  flex: 1;
}

.example2 content {
  flex: 2 2 0px;
}
.example2 aside {
  flex: 1 1 0px;
}

getsize();

function getsize() {
  var n = 0;
  for (var node of document.querySelectorAll('.col')) {
    document.querySelectorAll('span')[n].textContent = node.getBoundingClientRect().width+"px";
    n++;
  }
}

window.onresize = function(event) {
  getsize();
};