<div class="container">
  <div>
    <p>When you turn something into a flex container, you can set flex properties on its items, which will let you do ratios in a whim.</p>
    <p>You can do something like 2:1, but any other number will also work.</p>
    <p>Note that the browser will do the maths for you, no need to worry about percentages.</p>
  </div>
</div>

<div class="container">
  <div id="item-1">flex: 2</div>
  <div id="item-2">flex: 1;</div>
</div>

<div class="container">
  <div id="item-3">flex: 3.524</div>
  <div id="item-4">flex: 0.52</div>
</div>

.container {
  display: flex;
  max-width: 50em;
  margin: 2em auto;
}

  #item-1 {
    flex: 2;
    background-color: #16E7CF;
  }

  #item-2 {
    flex: 1;
    background-color: #00A89D;
  }

  #item-3 {
    flex: 3.524;
    background-color: gold;
  }
  #item-4 {
    flex: 0.52;
    background-color: hotpink;
  }