fix markdown .center, .right, .left not respecting new lines (#9326)

## 📝 Summary

<!--
If this PR closes any issues, list them here by number (e.g., Closes
#123).

Detail the specific changes made in this pull request. Explain the
problem addressed and how it was resolved. If applicable, provide before
and after comparisons, screenshots, or any relevant details to help
reviewers understand the changes easily.
-->

Wraps in a div with vstack instead of hstack. Use _BlockWrapped because
plain vstacks were causing additional spacing to be added between divs.

Before:
<img width="1144" height="582" alt="image"
src="https://github.com/user-attachments/assets/481661d4-135a-4d44-a2ac-0177ae5a8621"
/>

After:
<img width="1147" height="675" alt="image"
src="https://github.com/user-attachments/assets/4aa8ede4-0d0d-471a-a0fd-3803a039918c"
/>

## 📋 Pre-Review Checklist
<!-- These checks need to be completed before a PR is reviewed -->

- [ ] For large changes, or changes that affect the public API: this
change was discussed or approved through an issue, on
[Discord](https://marimo.io/discord?ref=pr), or the community
[discussions](https://github.com/marimo-team/marimo/discussions) (Please
provide a link if applicable).
- [x] Any AI generated code has been reviewed line-by-line by the human
PR author, who stands by it.
- [x] Video or media evidence is provided for any visual changes
(optional). <!-- PR is more likely to be merged if evidence is provided
for changes made -->

## ✅ Merge Checklist

- [x] I have read the [contributor
guidelines](https://github.com/marimo-team/marimo/blob/main/CONTRIBUTING.md).
- [ ] Documentation has been updated where applicable, including
docstrings for API changes.
- [x] Tests have been added for the changes made.

Author: Light2Dark

examples/ui/layout.py

@@ -7,7 +7,7 @@
 
 import marimo
 
-__generated_with = "0.19.7"
+__generated_with = "0.23.2"
 app = marimo.App()
 
 

marimo/_output/hypertext.py

@@ -204,7 +204,7 @@ def center(self) -> Html:
         """
         from marimo._plugins.stateless import flex
 
-        return flex.hstack([self], justify="center")
+        return flex.vstack([_BlockWrapped(self)], align="center", gap=0)
 
     @mddoc
     def right(self) -> Html:
@@ -220,7 +220,7 @@ def right(self) -> Html:
         """
         from marimo._plugins.stateless import flex
 
-        return flex.hstack([self], justify="end")
+        return flex.vstack([_BlockWrapped(self)], align="end", gap=0)
 
     @mddoc
     def left(self) -> Html:
@@ -236,7 +236,7 @@ def left(self) -> Html:
         """
         from marimo._plugins.stateless import flex
 
-        return flex.hstack([self], justify="start")
+        return flex.vstack([_BlockWrapped(self)], align="start", gap=0)
 
     @mddoc
     def callout(
@@ -289,6 +289,33 @@ def _repr_html_(self) -> str:
         return self.text
 
 
+class _BlockWrapped(Html):
+    """Wraps another Html in a plain block ``<div>``.
+
+    Used by :meth:`Html.center`, :meth:`Html.left`, and :meth:`Html.right`
+    so that the wrapped content renders inside a single block container
+    (preserving normal block flow and margin collapsing between inner
+    elements) rather than becoming multiple flex-column siblings when the
+    inner wrapper uses ``display: contents`` (as ``mo.md`` does).
+
+    The inner Html is re-rendered on every ``text`` access so mutable
+    children (e.g. ``mo.status.spinner``) keep updating live.
+    """
+
+    def __init__(self, inner: Html) -> None:
+        self._inner = inner
+        super().__init__(self._build_text())
+
+    def _build_text(self) -> str:
+        from marimo._output.builder import h
+
+        return h.div(self._inner.text)
+
+    @property
+    def text(self) -> str:
+        return self._build_text()
+
+
 MARIMO_NO_JS_KEY = "MARIMO_NO_JS"