Question Using a Horizontal Layout Group to position Text and Buttons with arbitrary, mutable text

I've seen about a thousand versions of this question in the several days I've spent trying to figure out how to do what seems like roughly the simplest imaginable use case for a UI system. Unfortunately, they all end up suggesting unchecking Child Force Expand (which does not work) or using a Content Size Fitter (which is strongly discouraged by Unity UI and documentation if it's on a child of a layout group). So, here's my setup:

Vanilla game object with three children:


The top object has a Horizontal Layout Group:

The children are completely normal Text Mesh Pro Buttons and Text Controls, which I've disabled wrapping for:


What I want is to type in (or set via script) arbitrary text, long or short, into each button and text control. I want each of those controls to resize themselves horizontally to minimally fit their text. Then I want the parent layout group to lay out the three controls from left to right, not overlapping.

That is not what happens; instead, you get something like this:

(red text is the first button, blue text is the second text control, fushia text is the third button)

This seems like such an obvious and simple scenario, I'm certain I'm missing some fundamental lens about how Unity UI wants me to think about this. But after reading the docs many, many times, I cannot find it. Can someone explain, step by step (because I don't know which probably obvious step I'm missing how I would setup these four (logical) objects to achieve this seemingly simple goal?