title: How to stick two unrelated elements together?
body: <p>I'm working on an interface and I require something that would stick two unrelated elements together. Well, the most important element will be the "boss" and the other element called "employee" will follow the "boss" around and will change it's position accordingly.</p>
  
  <p>This is the markup:</p>
  
  <pre><code>&lt;div class="boss"&gt;&lt;/div&gt;
  &lt;div class="employee"&gt;&lt;/div&gt;
  &lt;div class="boss"&gt;&lt;/div&gt;
  &lt;div class="employee"&gt;&lt;/div&gt;
  &lt;div class="boss"&gt;&lt;/div&gt;
  &lt;div class="employee"&gt;&lt;/div&gt;
  &lt;div class="boss"&gt;&lt;/div&gt;
  &lt;div class="employee"&gt;&lt;/div&gt;
  </code></pre>
  
  <p>This is the jQuery I wrote:</p>
  
  <pre><code>$('.boss').each(function( i, obj ){
  
          var Pos = $(this).position();
          var ModuleWidth = $(this).outerWidth();
  
          $(this).next('.employee').position({
                  my: 'right top',
                  at: 'right top',
                  of: $(this)
          });
  
  });
  </code></pre>
  
  <p>So I'm iterating through all the .boss classes and aligning all .employees to the right top of boss. They are supposed to always stick. But if I edit the html from the boss within chrome Developer Tools the .boss element will become smaller and larger <strong>and the .employee will not re-position</strong> its self accordingly. I would like to make .employee always reposition its self.</p>
  
  <p>Later Update:</p>
  
  <p>This <a href="http://screencast.com/t/F0RO7ODF" rel="nofollow">http://screencast.com/t/F0RO7ODF</a> is the kind of behavior i'm looking for. The gray box is the BOSS and the orange box is the EMPLOYEE. These 2 element's have a wrapper and i'm actually moving the wrapper. But i'd like a solution without a wrapper. Note: The organge box's position is irelevant.</p>