How can you nicely do this in CSS?

|                        |                       |
|                        |                       |
|          012345678    XYZ    AB                |
|                        |                       |
|                        |                       |
|                        |                       |
|                        |                       |

Here, the left and right bars are the boundaries, the middle bar is the center, and the XYZ is centered. Then there is 4 monospace spaces between the left and the right characters beside XYZ (could be px spacing too).

Ideally there would be 16px padding around the entire box (so 16px to the left, and maybe 60px to the right or however many it ends up being, so the bounding padding box is centered too).

Ideally it would fit dynamic-width child elements (arbitrary widths each). Basically you have the centered thing, and the things on the left and right that are the same distance away on both sides.

The only way I can think of doing it is to manually do position: absolute on the left and right, and set the bounding box to an explicit width, but that seems brittle and less than ideal. Is there any other clever way to accomplish this?

I am playing with layout and notice the noun/verb/adjective is not aligned properly when I just center the flex box and set each child to an explicit width.

Wanted to see what the answer to this question might look/feel like instead of what I have now. If I just put dynamic width, but a constant gap between, then verb is not centered.