Enforce double width unicode symbols to use double width in Markdown or CSS

Question

I want to control the visual width of double-width unicode characters like the LARGE ORANGE SQUARE in Github-flavored Markdown; either using Markdown code or Html/CSS.

For instance, see the following Markdown code section that misrenders the strings in Brave on MacOS (Chromium 105, MacOS 12.6, as of 2022-09-27):

                        1 3 5 7 9
single width reference  ↓ ↓ ↓ ↓ ↓
double width unicode    🟪🟫🟩🟪🟫🟩🟪🟫🟩
double width reference  ↑ ↑ ↑ ↑ ↑ ↑ ↑ ↑ ↑
                        1 2 3 4 5 6 7 8 9

The double-width characters are breaking out of the monospaced grid and thus cannot be used safely in such a place, eg, for box drawing or game rendering.

The characters render just fine in system terminals, such as iTerm2 or the VSCode terminal shown below.

Therefore, this seems to be a Markdown/CSS/Html issue, probably related to the fonts used by the website and through the browser in general.

Questions

1. How do I get full control over the width of such unicode strings in Markdown code sections?
2. Are there other workarounds to make it work at least on Github?