title: Is it possible to position one element relative to another dynamically sized element using only styles?
body: <p>Is it possible to position one element relative to another specific element using only CSS styles if some of the dimensions are dynamic?</p>
  
  <p>I know I can easily do this with jQuery, but I'm trying to push everything into the stylesheet that I possibly can rather than leaning on javascript.</p>
  
  <p>Here is code that does more or less what I'm trying to accomplish, though I'd like to get rid of the javascript and still have the same effect:</p>
  
  <p><a href="http://jsfiddle.net/EaHU7/" rel="nofollow noreferrer">http://jsfiddle.net/EaHU7/</a></p>
  
  <p>Content:</p>
  
  <pre><code>&lt;div id="reference"&gt;
      Some text - lorem ipsum, or short, shouldn't matter.  See CSS
  &lt;/div&gt;
  &lt;div id="relative"&gt;
      Relative
  &lt;/div&gt;
  </code></pre>
  
  <p>CSS:</p>
  
  <pre><code>div#reference {
      min-height:200px; /* could be thousands of pixels */
      width:500px;
      padding:1em;
      border-style:solid;
      border-width:1px;
  }
  
  div#relative {
      width:50px;
      height:50px;
      padding:1em;
      background:orangered;
      border-style:solid;
      border-left-style:none;
      border-width:1px;
  }
  </code></pre>
  
  <p>JS:</p>
  
  <pre><code>var reference = $("div#reference");
  var refPos = reference.offset();
  var refWidth = reference.outerWidth();
  var refHeight = reference.outerHeight();
  
  var relative = $("div#relative");
  var relHeight = relative.outerHeight();
  
  relative
      .css({
          "position":"absolute",
          "left":(refPos.left + refWidth) + "px",
          "top":(refPos.top + refHeight - relHeight) + "px"
      })
      .show();
  </code></pre>
  
  <p>Screenshot:</p>
  
  <p><img src="https://i.stack.imgur.com/wSyCe.png" alt="screenshot of dynamically positioning div relative to other dynamically sized div"></p>