title: CSS inline-block transitions
body: <p><strong>Brief Summary</strong></p>
  
  <p>I have a page that I'm using to list a set of divs. They expand to the full width of the page and the sizes are determined by percentages. </p>
  
  <p>I've added 3 buttons at the top that use a bit of jQuery to control the layout of these divs. For example if state one is active (the default) then the divs have 100% width and a max-height of 400px (width set to 100%). When the second button is pressed and state 2 is activated the divs assume 50% width and are ordered 2 in each row. When state 3 is activated via the third button its divs widths assume 33% and are ordered 3 in each row. </p>
  
  <p>How I've set it out is to add a CSS class to the div via jQuery to express the state that it's currently in. Everytime a new state is called both opposing states are removed via jQuery just to cover all of the bases no matter what state it's currently in. </p>
  
  <p>All of this works absolutely fine.</p>
  
  <p><strong>The Problem</strong></p>
  
  <p>I'm wanting to make the transition between states as smooth as possible. Although adding a transition effect of ease-in-out allows for smooth resizing. The actual movement of a div onto a new line is instantaneous. I would much prefer for a transitional movement from its position below to the row above, rather than it jumping instantly. </p>
  
  <p>To demonstrate the desired transition, please check this fiddle - <a href="http://jsfiddle.net/Mke7E/" rel="nofollow">http://jsfiddle.net/Mke7E/</a></p>
  
  <p>Although this works, it's based on media queries and that's obviously not what I'm using. Along with that it uses fixed widths/heights and after a little play around I'm unable to replicate the functionality and incorporate it into my own.</p>
  
  <p>I've seen multiple sites using this through colleagues at work, unfortunately I can't quite remember any presently or I would be inspecting their code to understand it better myself. </p>
  
  <p><strong>Demonstration of my issue</strong> </p>
  
  <p>CodePen: <a href="http://codepen.io/anon/pen/MYLByw" rel="nofollow">http://codepen.io/anon/pen/MYLByw</a> </p>
  
  <p>If you notice the difference of how from state 1 to 2 is a jump from the second div to the top row, yet in the jsfiddle from my description it will nearly transition across to the top right from below. That is what I am attempting to achieve.</p>
  
  <p><strong>My code</strong></p>
  
  <p>jQuery</p>
  
  <pre><code>$( "a.full" ).on("click", function(e) {
      $( "div.box" ).removeClass( "half third" ).addClass("full");
      e.preventDefault();
  });
  $( "a.half" ).on("click", function(e) {
      $( "div.box" ).removeClass( "full third" ).addClass("half");
      e.preventDefault();
  });
  $( "a.third" ).on("click", function(e) {
      $( "div.box" ).removeClass( "half full" ).addClass("third");
      e.preventDefault();
  });
  </code></pre>
  
  <p>HTML </p>
  
  <pre><code>&lt;a href="#" class="full"&gt;STATE 1&lt;/a&gt;
  &lt;a href="#" class="half"&gt;STATE 2&lt;/a&gt;
  &lt;a href="#" class="third"&gt;STATE 3&lt;/a&gt;
  
  &lt;div class="box"&gt;SOME CONTENT&lt;/div&gt;
  &lt;div class="box"&gt;SOME CONTENT&lt;/div&gt;
  &lt;div class="box"&gt;SOME CONTENT&lt;/div&gt;
  &lt;div class="box"&gt;SOME CONTENT&lt;/div&gt;
  &lt;div class="box"&gt;SOME CONTENT&lt;/div&gt;
  &lt;div class="box"&gt;SOME CONTENT&lt;/div&gt;
  </code></pre>
  
  <p>CSS: </p>
  
  <pre><code>div.box {
      width: 100%;
      left: auto;
      background-size: 100%;
      background-position: center center;
      height: 100%; 
      background-repeat: no-repeat;
      position: relative;
      display: block;
      padding: 0;
      margin: 0;
      background:red;
      text-align: center;
      transition: all 400ms ease-in-out;
      transform-origin: 50% 50%;
      white-space:nowrap; 
  }
  div.box.half {
      display: inline-block;
      width: 49%;
      white-space:nowrap;    
  }
  
  div.box.third {
      display: inline-block;
      width: 33%;
      white-space:nowrap;
  }
  
  a {
      width:100%;
      display:block;
  }
  </code></pre>