title: Hidden Element slides between another element
body: <p>I'm trying to create the same effect as found on this site here <a href="https://glenner.org/" rel="nofollow">https://glenner.org/</a> in the header when you click either the phone or email icon it toggles hidden text to slide. So when you click on the phone icon the text slides between the phone and the email icon.</p>
  
  <p>I have this so far: </p>
  
  <pre><code>&lt;div id="clickable" style="float:left; cursor:pointer; color: red"&gt;&lt;i class="fa fa-phone"&gt;&lt;/i&gt;&lt;/div&gt; 
  &lt;div id="hidden" style="display:none; white-space:nowrap;"&gt;Phone Number&lt;/div&gt;
  
  &lt;div id="clickable2" style="float:left; cursor:pointer; color: red"&gt;&lt;i class="fa fa-envelope"&gt;&lt;/i&gt;&lt;/div&gt; 
  &lt;div id="hidden2" style="display:none; white-space:nowrap;"&gt;Email Here&lt;/div&gt;
  </code></pre>
  
  <p>//</p>
  
  <pre><code>$('#clickable').click(function() {
      $('#hidden').animate({width:'toggle'},350);
  });
  
  $('#clickable2').click(function() {
      $('#hidden2').animate({width:'toggle'},350);
  });
  </code></pre>
  
  <p>As of now when I click on one of the links it goes down to the next line, I'm sure I'm missing some css styling to fix this?</p>
  
  <p>Here is my JsFiddle set up for it: <a href="http://jsfiddle.net/804jeg82/412/" rel="nofollow">http://jsfiddle.net/804jeg82/412/</a></p>