title: CSS: How to add smooth shift to div width upon text change?
body: <p>If anyone can phrase this question better than I can, please advise and I will alter (or edit yourself).</p>
  
  <p>Here's my current jsfiddle: <a href="https://jsfiddle.net/5v7mzadu/" rel="nofollow noreferrer">https://jsfiddle.net/5v7mzadu/</a></p>
  
  <p><strong>My HTML:</strong></p>
  
  <pre><code>&lt;div class="text-cycler"&gt;
      WE &lt;div class="c-text" id="ctext-1"&gt;CARE&lt;/div&gt;
         &lt;div class="c-text" id="ctext-2"&gt;THINK&lt;/div&gt;
         &lt;div class="c-text" id="ctext-3"&gt;SEE&lt;/div&gt;
         &lt;div class="c-text" id="ctext-1"&gt;KNOW&lt;/div&gt;
  &lt;/div&gt;
  </code></pre>
  
  <p><strong>My CSS:</strong></p>
  
  <pre><code>.text-cycler {
       text-align:center;
       font-size:25px;
  }
  .c-text {
      display:inline-block
  }
  </code></pre>
  
  <p><strong>My Javascript:</strong></p>
  
  <pre><code>var divs = $('div[id^="ctext-"]').hide(),
             i = 0;
  
  (function cycle() { 
  
      divs.eq(i).fadeIn(400)
          .delay(1000)
          .fadeOut(400, cycle);
  
      i = ++i % divs.length;
  
  })();
  </code></pre>
  
  <p>As you can see the second word fades in/out,. I'd like to add a smooth transition to the div, so that the width of the div container does NOT abruptly change width size. (so that the width "snap" is more smooth)</p>
  
  <p>Can anyone help?</p>