Avoid unwanted text block "padding" when line breaks

Community resources Webflow Tips
1

Hey guys! Quick question. I have buttons that are made up of a Link block with 2 text blocks inside of it. The first text block is for text with the width set to auto. The second is for a “>” carrot symbol. On hover, this carrot slides right.

The carrot stays close to the end of the text until I resize the screen and my text breaks onto 2 lines. The “padding” (I understand it’s not actually padding, but it’s the best way I can describe it) in the text block keeps the carrot too far away from the text.

Is there anything I can do to prevent that? I attached some screen shots to show you what I mean.

Screen Shot 2021-01-26 at 7.19.47 AM (2)
Screen Shot 2021-01-26 at 7.19.47 AM (2)3840×2160 708 KB

Screen Shot 2021-01-26 at 7.20.02 AM (2)
Screen Shot 2021-01-26 at 7.20.02 AM (2)3840×2160 712 KB

Here’s a read-only link to my site: https://preview.webflow.com/preview/empact?utm_medium=preview_link&utm_source=designer&utm_content=empact&preview=c47ec1806fb8579c30bc2844fcb6584a&mode=preview

2

I think I figured out a solution. Not sure if it’s gonna work every time. I set the width of the link block to 50vw…which kept all my text on 1 line when re-sized. We’ll see if it works in other areas of the site.

3

Well… it didn’t work on other parts of the site. Must have been a fluke.