Mixing Text and non-Text content in UIs

## What problem does this solve or what need does it fill?

Currently Bevy UI text nodes are segregated from other kinds of UI nodes - text spans can only live inside of a `Text` component. I understand the reasons for this - it makes the layout engine simpler, since things like word-wrap calculations only apply to `Text` components and not UI components generally.

However, there are some use cases where you would like to mix text and non-text content in a single context. A classic example is a button that has both an icon and a text caption. Yes, you can make a button that has a dedicated "slot" for an icon, but only if the button component is specifically built for this. The same logic holds for menu items, dialog titles, basically anything that accepts a text string - it's better if these can accept a variety of renderable elements.

## What solution would you like?

I'm not sure what's the right solution. We all know what the web does, but that's an ambitious target, Bevy is never going to have parity with Firefox when it comes to layout. The two most interesting web cases are `flex` and `inline` - that is, either the text and images are laid out in a row with gaps between them, or they are laid out fluidly with word-wrap.

## What alternative(s) have you considered?

The flex use case can be done by wrapping everything in an extra UI component. The word-wrap case I'm not sure how you would do.

## Additional context

This is likely to be relevant in the context of future Bevy UI / Scene Graph assets.

The issue names no files, tests, or entry points. Start by reading Bevy's current UI text and layout architecture, then establish how mixed text and non-text content should be represented and laid out; done means the design handles the requested flex and word-wrap use cases.

Written by the indexing model from the issue text.