title: Set a div's height to a percentage of sibling div
body: <p>I have three sibling divs in a row:</p>
  
  <p>Right div: A div that has height determined by its text content.</p>
  
  <p>Center div: A div that should match the height of the Right div.</p>
  
  <p><strong>Left div: A div that I <em>want</em> to set at 50% height of the Right div.</strong></p>
  
  <p><a href="http://jsfiddle.net/jrsnyder/h7gc12wb/4/" rel="nofollow noreferrer">Demo</a></p>
  
  <p>CSS attempt using flexbox with Left div not working:</p>
  
  <pre><code>.container {
      display: flex;
  }
  .left {
      width: 50px;
      height: 50%;
      background-color: lightcyan;
  }
  .center {
      width: 50px;
      background-color: lightcoral;
  }
  .right {
      width: 300px;
      background-color: palegreen;
  }
  </code></pre>
  
  <p>The only way I have discovered to allow the Left div to calculate a percentage of the Right div's height is to use <code>position: absolute</code>, like in <a href="https://stackoverflow.com/questions/7676022/html5-flexible-box-model-height-calculation/15388247#15388247">this answer</a>.</p>
  
  <p>Absolute positioning is less than ideal, because it prevents me from using normal layout flow to set the three divs next to each other in a row.</p>
  
  <p><strong>Is there any way I can set the Left div to a percentage of the Right div's height, without needing to use a fixed horizontal layout to set the three divs in a row?</strong></p>
  
  <p>The layout only needs to work in recent Chrome, so browser incompatibilities are not an issue.  I am open to solutions using flexbox or table layout.</p>