title: Change position pull element
body: <p>I've got two inline-block elements side by side. If I'm changing the position of the second one (right -300px), the first one stays and not got pulled by the second one.</p>
  
  <p>If you are clicking on <code>&lt;div class="navigation"&gt;&lt;/div&gt;</code> the <code>&lt;nav class="main-nav"&gt;</code> got <code>right: -300px;</code> but the first element with the blue background does not move to the right side.</p>
  
  <p>Have a look: <a href="http://jsfiddle.net/7jqmtcon/" rel="nofollow">FIDDLE</a></p>
  
  <pre><code>&lt;section class="sidebar"&gt;
            &lt;div class="navigation"&gt;
            &lt;/div&gt;&lt;nav class="main-nav"&gt;
                &lt;ul&gt;
                    &lt;li&gt;&lt;a href="#"&gt;&lt;span&gt;Lorem&lt;/span&gt;&lt;/a&gt;&lt;/li&gt;
                    &lt;li&gt;&lt;a href="#"&gt;&lt;span&gt;Lorem&lt;/span&gt;&lt;/a&gt;&lt;/li&gt;
                    &lt;li&gt;&lt;a href="#"&gt;&lt;span&gt;Lorem&lt;/span&gt;&lt;/a&gt;&lt;/li&gt;
                    &lt;li&gt;&lt;a href="#"&gt;&lt;span&gt;Lorem&lt;/span&gt;&lt;/a&gt;&lt;/li&gt;
                    &lt;li&gt;&lt;a href="#"&gt;&lt;span&gt;Lorem&lt;/span&gt;&lt;/a&gt;&lt;/li&gt;
                &lt;/ul&gt;
            &lt;/nav&gt;
        &lt;/section&gt;
  </code></pre>
  
  <p>This my jQuery for toggle the class:</p>
  
  <pre><code>$( ".navigation" ).click(function() {
    $( ".main-nav" ).toggleClass( "open" );
  });
  
  .sidebar {
      position: fixed;
      top: 0;
      right: 0;
      z-index: 99;
  }
  
  .sidebar .navigation {
      height: 130px;
      width: 130px;
      background: #0077b4;
      position: relative;
      display: inline-block;
      cursor: pointer;
      float: left;
  }
  
  .main-nav {
      display: inline-block;
      position: relative;
      right: 0;
      transition: right 0.3s linear;
      -webkit-transition: right 0.3s ease;
      -moz-transition: right 0.3s ease;
      -o-transition: right 0.3s ease;
  }
  
  .main-nav.open {
      right: -300px;
  }
  
  .main-nav ul {
      list-style: none;
      margin: 0;
      padding: 0;
  }
  
  .main-nav ul li {
      float: left;
      height: 130px;
      width: 130px;
      background: #000;
      position: relative;
  }
  
  .main-nav ul li a {
      position: absolute;
      height: 100%;
      width: 100%;
      top: 0;
      left: 0;
  }
  
  .main-nav ul li span {
      position: absolute;
      top: 50%;
      left: 50%;
      transform: translate(-50%, -50%);
      -webkit-transform: translate(-50%, -50%);
      -moz-transform: translate(-50%, -50%);
      -o-transform: translate(-50%, -50%);
      color: #fff;
  }
  </code></pre>
  
  <p>My Question: The left blue element should move to the right side of the right "main-nav" gets moved.</p>