Material for MkDocs - formatting to two panels

I use Material for MkDocs. Is it possible (perhaps with some plugin or Markdown extension) to render two blocks so they show as two panels next to each other? Each panel would occupy half of its container width.

This feature would be useful for rendering examples - left panel could contain source code and right panel its output. GitHub Flavored Markdown Specification uses it frequently.

The closest features I could find are for instance:

• Content Tabs in Admonitions - however unlike Content Tabs I want to see only two tabs and want to see them at once.
• plain tables - but this has limited usage for multiline content and also 50%:50% width ratio is not easily enforced

Finally solved using tabbed extension with custom css style which formats two tabs to desired layout.

What needs to be in project:

• create twopanels.css file

h6.twopanels {
    display: none;
}

h6.twopanels + .tabbed-set {
    --md-indicator-x: 0px !important;
    --md-indicator-y: 0px !important;
    --md-indicator-width: 0px !important;
    --gap-between-two-panels: 1rem;
}

h6.twopanels + .tabbed-set .tabbed-content {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: var(--gap-between-two-panels);
}

h6.twopanels + .tabbed-set .tabbed-block {
    display: block;
    overflow-x: scroll;
}

h6.twopanels + .tabbed-set .tabbed-labels {
    box-shadow: unset;
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: var(--gap-between-two-panels);
}

h6.twopanels + .tabbed-set .tabbed-labels label {
    box-shadow: 0 -.2rem var(--md-default-fg-color--lightest) inset;
    width: 100%;
}

h6.twopanels + .tabbed-set .tabbed-labels label a {
    color: var(--md-default-fg-color);
}

h6.twopanels + .tabbed-set input[type="radio"] {
    display: none;
}

• add path/to/twopanels.css to extra_css: in mkdocs.yml

Usage:

###### Example {: .twopanels}

=== "Source"

    ```markdown
        Normal, **bold**, *italic*, _underlined_, `monospaced` text.
    ```

=== "Result"

    Normal, **bold**, *italic*, _underlined_, `monospaced` text.

Note:

• css was initially designed by AI and then changed manually, there might be potential to optimization
• The .twopanels class is intentionally applied to element after h6 header (i.e. sibling of h6). Wrapping tabbed markdown into <div class="twopanels"> would be definitely better solution but the tabbed extension does not parse it correctly - even if markdown of tabs is wrapped by <div>, in final HTML the div is empty and HTML of rendered tabs is placed after it.