Any way inside a widget to avoid two texts hitting each other?

The problem is that sometimes the length of the text 1 is so long that it hits text 2 (overlaps). I want to be able for text 2 to dynamically change its position a little bit to the right (position x).

Basically is there some way that Text 1 and Text 2 always maintain a set distance say 10 regardless of the length of text?

Don’t think padding will help here.
PS : The text is a child of a button.

I could not find a similar question that solves this so if it has been solved sorry and please provide the link.

Place both texts in a Horizontal Box and give the right one padding of 10 Left:

Image from Gyazo

This will work with buttons, too.

Please present your feet so i may kiss them…

Is it also possible to know how i can use image as background with horizontal box? Right now if i add image to horizontal box the image just gets placed on the side of the text box. I would like to use the size to content option so as text gets longer the background image also gets longer.

Thank you

PS : I just came across another one of your answers which helped me with background. Posting it here for anyone else needing this:

Is it also possible to know how i can
use image as background with
horizontal box?

You might’ve discovered it already…

…but the easiest solution is to place an Overlay panel in the Canvas, flag the overlay as Size to Content and populate it with a Horizontal Box hosting Buttons / Text. Adding an Image or a Border to an overlay allows one to use a Texture2d or a Material as background.

The element order in the Overlay’s hierarchy represents Z order. By moving the children of the overlay around, you control who gets to be drawn on top of whom.