title: CSS - Fixed div as child of a fixed div
body: <p>In <a href="http://jsfiddle.net/01mrrrj6/" rel="nofollow noreferrer">this jsfiddle</a> I want to make it so that the red box always stays aligned with the right edge of the gray "footer" box, regardless of how the width of the "footer" box changes. That is, the red box is in the correct place initially, but when you click the "extend footer" button, the "footer" box gets longer, and the red box doesn't move with it (because I have it as position absolute right now).</p>
  
  <p>How can I make the red box be fixed to the right edge of the gray "footer" box?</p>
  
  <p>Code for jsfiddle:</p>
  
  <p>HTML:</p>
  
  <pre><code>&lt;div class="footerContainer"&gt;
      footer
      &lt;div class="aboveFooter"&gt;&lt;/div&gt;
  &lt;/div&gt;
  &lt;button id="btnClick"&gt;
      Extend footer
  &lt;/button&gt;
  </code></pre>
  
  <p>CSS:</p>
  
  <pre><code>.footerContainer {
      background-color:#ddd;
      position: fixed;
      padding: 2em;
      left: 0;
      bottom: 0;
  }
  
  .aboveFooter {
      position: absolute;
      bottom: 82px;
      left: 52px;
      height: 50px;
      width: 50px;
      background-color:red;
  }
  </code></pre>
  
  <p>JS:</p>
  
  <pre><code>$('#btnClick').on('click',function(){
      $('.footerContainer').html($('.footerContainer').html() + ' longer');
  });
  </code></pre>