Aligning admonitions horizontally with a css flexbox (all in markdown document)

[fralau]

Just in case, I found this interesting usage. It's too early to say whether it will be actually useful, but it's worth mentioning.

Essentially, it consists of placing a number of admonition bits, between in an HTML <section>, with a display:flex style (flexbox). This will align the elements side-by-side, no css fiddling required, except this declaration.

<section markdown="1" style="display: flex;">

!!! Warning "Is your company, department or team..."
    * Waiting for solutions ? 
    
!!! Tip "How to be more effective "
    You could do this and that

</section>

This requires, of course, forcing MkDocs to interpret the markdown inside the <section>tag. For that there is the md_in_html markdown extension (which is part of the standard extensions). To invoke interpretation of the markdown, it is sufficient to add the attribute markdown="1" to the <section> tag.

And it works !

[fralau]

Note that this is not restricted to admonitions. Basically, it will work with any block elements (add markdown="1") to get the markdown interpreted within. This will align two blocks of vertical text horizontally:

<section markdown="1" style="display: flex;">

<div class="my-block" markdown="1"> 
## Is your company, department or team..."
    
* Waiting for solutions ? 
</div>

<div class="my-block" markdown="1">
## Tip "How to be more effective "

* You could do this and that
</div>

</section>

From there, adding a little css dressing to the box divs (margin, border, padding, font size, background) would be easy.