HELP with using different text blocks in one heading

Hi! I'm hoping someone can help with this as I've scoured the internet and nothing so far. 

My client has a tricky branding guide, and it uses 3 different fonts in one heading. So I've uploaded the fonts and added them with CSS but now I'm having trouble with them moving all over the place when the screen is made smaller - because I'm using a different block for the text variations. 

See attached photos for reference. 

Image 1: Is how the text needs to look
Image 2: Shows the three different blocks used to get that style
Image 3: Is how it looks when the screen is made smaller. 

I've tried removing automatic hyphenation but it didn't work as I'm assuming it only works when everything is within one text block. 

Thank you! Any help is appreciated! 

URL: https://rachel-rebibo.squarespace.com/
Password: rr123

Highlight the text inside each block and apply the stretch tool to it.

This will make the text fill it's container and it should then scale with all screen sizes.

Pic attached for reference.

Is there a reason you can't use them all in the one text block?

I suppose it would make it more difficult to control spacing on mobile...

Hi @CassAggett and @bycrawford - thanks for your replies! 

the reason I’m using three different text blocks is because I need to include three different fonts within the title.

I’m fairly new to Squarespace designing and still learning, so please let me know if there is a simpler way to include the 3 fonts in one block?

@bycrawford - unfortunately this didn’t work as it makes the text look all different sizes depending on the length of the word 😞

Attached is a video of a site that I want to emulate - simply put, I don't want the text to move at all, and when the screen is made smaller it just eventually cuts off. 

Any ideas on how I can achieve this?

@CassAggett - Thank you so much!! That makes so much more sense to do it like this. 🙂

@CassAggett - May I still ask, do you know how I can stop text from collapsing like in the video above? I've swapped over the text as per your suggestion and it's looking much better but I'd still like to give that as an option. Thanks! 

@taylahroberts1 Is there a reason you'd rather have the text cut off when the screen size is made smaller? In the video it just looks like their website isn't responsive to browser sizes meaning it would be essentially inaccessible on anything other than a desktop. But no, I'm not sure how you'd achieve that!