Keep text from moving next to animated text

Site URL: https://agicreative.com/info/team

Site Password: password

I have some animated copy in the banner area on my site and I want to control that the text around it doesn't move with the animated text animates. Essentially, you see "Driven By" move every time the animated text moves to accommodate the spacing. I am hoping that I can make the animated text stay left aligned to keep the "Driven By" static.

Here is the code I am using for the animated text:

<section class="sp-intro">
    <h1 class="sp-headline slide">
      <span>We're a team of image makers, <pbr>driven by <span>
        <span class="sp-words-wrapper">
            <b class="is-visible">creativity.</b>
				<b>Coffee.</b>
				<b>Family.</b>
				<b>Music.</b>
				<b>Tacos.</b>
				<b>Video Games.</b>
				<b>Adventure.</b>
<b>Art.</b>
<b>Science.</b>
<b>Beer.</b>
<b>Nature.</b>
<b>Travel.</b>
<b>Lighting.</b>
<b>Laughter.</b>
<b>Puppies.</b>
<b>Relationships.</b>
<b>Collaboration.</b>
<b>Whiskey.</b>
<b>Technology.</b>
<b>Design.</b>

        </span>
    </h1>
</section>

Try editing your code

<span>We're a team of image makers, <pbr>driven by <span>

to

<span>We're a team of image makers, <pbr><span style="display:block;">driven by</span> <span>

24 minutes ago, tuanphan said:

Try editing your code

<span>We're a team of image makers, <pbr>driven by <span>

to

<span>We're a team of image makers, <pbr><span style="display:block;">driven by</span> <span>

 

Thank you for this, but unfortunately is just moved the animated text below the other text.

The problem is due to the width limit.
The solution here is to move drive by to new row, or increase the width of the entire block of text.

17 hours ago, tuanphan said:

The problem is due to the width limit.
The solution here is to move drive by to new row, or increase the width of the entire block of text.

That makes sense, thank you!