title: Animate grow/shrink text w/o paragraph shift
body: <p>I have paragraphs of text where certain words or sections in the paragraph should transition to red --> increase font-size and a few seconds later return to normal font size while maintaining the red highlight. (All of which I have functional with CSS transitions and Jquery adding the class to the span object) however - My goal is to have the grow/shrink occur without causing the surrounding paragraph text to shift/adjust/collapse as the font size increases and returns.</p>
  
  <p>It should occur as shown in the image below. How can i get this effect to work and prevent the surrounding text from shifting/adjusting?</p>
  
  <p><a href="https://i.stack.imgur.com/yLheU.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/yLheU.png" alt="enter image description here"></a></p>
  
  <p><strong>View the SNIPPET FULL SCREEN - it looks wrong inline of the div window</strong>
  <div class="snippet" data-lang="js" data-hide="false" data-console="false" data-babel="false">
  <div class="snippet-code">
  <pre class="snippet-code-js lang-js prettyprint-override"><code>$('#svcdef p').each(function(index) {
    var li = $(this);
  
    setTimeout(function() {
      li.slideDown(900);
    }, 500 * index);
  
    setTimeout(function() {
      $('#svcdef p span').addClass('cfred');
    }, 3000);
  
    setTimeout(function() {
      $('#svcdef p span').removeClass('cfred');
      $('#svcdef p span').css('color', 'red');
    }, 8000);
  });</code></pre>
  <pre class="snippet-code-css lang-css prettyprint-override"><code>#svcdef {
    text-align: left;
    height: 820px !important;
    color: #FFFFFF;
    text-align: justify;
    overflow: hidden;
    background-color: black;
  }
  #svcdef p {
    padding-left: 8px;
    padding-right: 8px;
  }
  #svcdef p span {
    transition: color 4s, font-size 2s ease-in-out;
  }
  .cfred {
    color: red;
    font-size: 24px;
  }
  #svc-content {
    height: 490px;
    float: left;
    width: 550px;
  }</code></pre>
  <pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"&gt;&lt;/script&gt;
  &lt;div style="color:yellow;"&gt;&lt;b&gt;REPUTATION MANAGEMENT&lt;/b&gt;
  &lt;/div&gt;
  &lt;style scoped="scoped"&gt;
    p {
      display: none;
    }
  &lt;/style&gt;
  &lt;br /&gt;
  &lt;div id="svcdef" class="modern-skin"&gt;
    &lt;p&gt;&lt;i&gt;&lt;b&gt;"It takes many good deeds to build a good reputation, and only one bad one to lose it."&lt;/b&gt;&lt;/i&gt; • Benjamin Franklin
      &lt;br&gt;
      &lt;br&gt;
    &lt;/p&gt;
    &lt;p&gt;Warren Buffet - Business magnate, Investor and philanthropist once stated "It takes 20 years to build a reputation and five minutes to ruin it. If you think about that, you’ll do things differently." Although a positive reputation for a brand and company
      does not in fact take 20 years to build, it is &lt;span&gt;possible&lt;/span&gt; for a single instance of negative consumer engagement to immediately cause &lt;span&gt;20 years&lt;/span&gt; or more of damage dependinging on the events that transpired and the manner in which
      the consumer shares the experience. Before the internet, many &lt;span&gt;companies were shielded&lt;/span&gt; from negative events occuring with their potential customers, word of mouth remained the the primary means of communicating displeasure and the social
      network of other consumers that a negatively impacted customer could reach was curtailed and more localized. Thus damage could be more easliy mitigated or in some cases ignored.&lt;/p&gt;
    &lt;br /&gt;
    &lt;p&gt;some other paragraph
    &lt;/p&gt;
    &lt;br /&gt;
    &lt;p&gt;Yet, another useless paragraph&lt;/p&gt;
  &lt;/div&gt;</code></pre>
  </div>
  </div>
  </p>