Here is a quick proof of concept of how I would do this:

Wrap each text bubble in another object which has the width of the whole chat box.

1. The ChatBox has a Vertical Layout Group with "Force Child Expand" on. This causes the "Wrapper" child objects to always have the width of the full chat box.
2. The "Wrapper" child objects is solely responsible for defining the space in which the chat bubble should be aligned. You might want to hide this object by removing the Image and CanvasRenderer components so it's nothing but a RectTransform. I just left them visible in this screenshot to better illustrate what is going on.
3. The "ChatBubble" is then placed within the "Wrapper". To switch between left-aligned and right-aligned boxes, set the Anchor and Pivot positions like this:

Here is a quick proof of concept of how I would do this:

Wrap each text bubble in another object which has the width of the whole chat box.

1. The ChatBox has a Vertical Layout Group with "Force Child Expand" on. This causes the "Wrapper" child objects to always have the width of the full chat box.
2. The "Wrapper" child objects is solely responsible for defining the space in which the chat bubble should be aligned. You might want to hide this object by removing the Image and CanvasRenderer components so it's nothing but a RectTransform. I just left them visible in this screenshot to better illustrate what is going on.
3. The "ChatBubble" is then placed within the "Wrapper". To switch between left-aligned and right-aligned boxes, set the Anchor and Pivot positions like this:

You can use the Width of the ChatBubble and the Height of the Wrapper to control the horizontal and vertical size of the bubble.