[Question] positioning nested groups

[JohnPaulHarold]

Describe your question

I'm having issues trying to align nested groups. It's quite possible I am doing this wrong, so it's a question for now, rather than viewing this as a bug.

Your code (either pasted here, or a link to a hosted example)

a simple CodePen is here, https://codepen.io/johnpaulharold/pen/EaYyjOa

Screenshots
a grab of what the codepen shows

Environment (please select one):

• Code executes in browser (e.g: using script tag to load library)
• Packaged software (e.g: ES6 imports, react, angular, vue.js)
• Running headless (usually Node.js)

---

If applicable:

Desktop (please complete the following information):

• OS: OSX
• Browser Chrome stable
• Version 131

Additional context

My expectation with the code is that the group of 3 red buttons should be aligned to that the vertical guideline appears to cut straight through the middle of the menu, which should be the "B" button. Instead, it appears as though only the first button in the group is considered. Am I doing something wrong here?