title: Toggling visibility between child elements while maintaining position
body: <p>I want to toggle visibility between a changing number of inline child elements as shown below. However as you can see they jump about because they are inline (which they need to be for semantic &amp; responsive reasons) and therefore cannot set an absolute position. I am using a php cms for the data (kirby) so I can't fetch the strings as valuables directly, so my thinking is the only solution is to completely fade one element before the other appears.</p>
  
  <p>Unless someone has another idea, what is the best way to do that using the code below? I can't crack it. Thanks!</p>
  
  <p><div class="snippet" data-lang="js" data-hide="false" data-console="true" data-babel="false">
  <div class="snippet-code">
  <pre class="snippet-code-js lang-js prettyprint-override"><code>  $( document ).ready(function() {
      $('.greetingWrapper span:gt(0)').hide();
      setInterval(function(){
        $('.greetingWrapper :first-child').fadeOut()
          .next('span').fadeIn()
          .end().appendTo('.greetingWrapper');}, 
        3000);
    });</code></pre>
  <pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"&gt;&lt;/script&gt;
  
  &lt;h1&gt;
  &lt;span class="greetingWrapper"&gt;
    &lt;span&gt;Hello&lt;/span&gt;
    &lt;span&gt;Bonjour&lt;/span&gt;
    &lt;span&gt;G'day&lt;/span&gt;
    &lt;span&gt;Yeoboseyo&lt;/span&gt;
  &lt;/span&gt;
  - thanks for joining us.
  &lt;/h1&gt;</code></pre>
  </div>
  </div>
  </p>