title: Two Sections 100% Height of Parent Div
body: <p>I have a specific layout that is causing me HUGE headaches. Here is an image:</p>
  
  <p><img src="https://i.stack.imgur.com/PfAnb.png" alt="enter image description here"></p>
  
  <p>My goal is to have the "Side panel" ALWAYS equal the height of the container. The "Enrollment Application" section is at 100% height already.</p>
  
  <p><strong>Current Markup</strong></p>
  
  <pre><code>&lt;body&gt;
      &lt;div id="container" class="pure-g"&gt;
  
          &lt;div class="pure-u-md-1-4 pure-u-1 panel" id="left-panel"&gt;
              &lt;div class="panel-row"&gt;
                  &lt;div class="panel p"&gt;
                      &lt;div class="inner-panel"&gt;
                          &lt;div class="panel-logo"&gt;
                               "Logo here text"
                          &lt;/div&gt;
                      &lt;/div&gt;
                  &lt;/div&gt;
              &lt;/div&gt;
              &lt;div class="panel-row"&gt;
                  &lt;div class="panel p"&gt;
                      &lt;div class="inner-panel"&gt;
                          &lt;nav class="panel"&gt;
  
                          &lt;/nav&gt;
                      &lt;/div&gt;
                  &lt;/div&gt;
              &lt;/div&gt;
          &lt;/div&gt;
          &lt;div id="right-panel" class="pure-u-md-3-4 pure-u-1 panel p"&gt;
              &lt;div class="inner-panel"&gt;
                  &lt;header class="pure-g"&gt;
                      &lt;div class="pure-u-md-1-4 pure-u-1 header-logo"&gt;
                          LOGO Would go here, of course.
                      &lt;/div&gt;
                      &lt;div class="pure-u-md-3-4 pure-u-1 header-title"&gt;
                          &lt;h1&gt;Consumers Energy&lt;/h1&gt;
                          &lt;h1&gt;&lt;strong&gt;CARE 3.0 Program&lt;/strong&gt;&lt;/h1&gt;
                          &lt;h1&gt;Enrollment Application&lt;/h1&gt;
                      &lt;/div&gt;
                  &lt;/header&gt;
  
                  &lt;div id="content"&gt;
                      "Enrollment application text..."
                  &lt;/div&gt;
              &lt;/div&gt;
          &lt;/div&gt;
      &lt;/div&gt;
  &lt;/body&gt;
  </code></pre>
  
  <p><strong>Current CSS</strong></p>
  
  <pre><code>.panel {
    box-sizing: border-box;
    height: 100%;
    display: table-cell;
  }
  .panel.p {
    padding: 3px;
  }
  .panel .panel-row {
    display: table-row;
  }
  .panel .inner-panel {
    border-radius: 5px;
    padding: 10px;
    width: 100%;
    box-sizing: border-box;
    background-color: red;
  }
  </code></pre>
  
  <p>Here is an alternative fiddle to play with: <a href="http://jsfiddle.net/3c3tqo3e/" rel="nofollow noreferrer">http://jsfiddle.net/3c3tqo3e/</a> but I really don't want to use a table...</p>
  
  <p><strong>Q</strong> How can we stack two divs and make their heights = 100% of parent? The "Logo here.." section will be an auto height.</p>
  
  <p><strong>NOTE</strong> I would <em>really</em> prefer an answer that is responsive-friendly. I am using PureCSS for the sections. (This means that absolute positioning is not preferred) Also, strongly prefer <em>just</em> css/html. Thanks!</p>