two_cols.md

Here's a handy function:

function two_cols(left, right)
	HTML("""
		<style>
		div.two-cols {
			display: flex;
			width: 100%;
		}
		div.two-cols > div {
			width: 50%;
			padding: 1em;
		}
		/*div.two-cols > div:first-child {
			padding-right: 1em;
		}
		div.two-cols > div:last-child {
			padding-left: 1em;
		}*/
		div.two
		</style>
		<div class="two-cols">
			<div>$(sprint(show, MIME"text/html"(), left))</div>
			<div>$(sprint(show, MIME"text/html"(), right))</div>
		</div>
		""")
end

You use it two put two markdown texts side-by-side, like so:

let
	body = two_cols(md"""

**Strong points:**
$(html"
<ul>
	<li class='pro'><b>Interactive</b> — essentially a REPL with multiple inputs</li>
	<li class='pro'><b>Code</b>, <b>output</b> & formatted <b>text</b> in <em>one document</em></li>
</ul>
")
""",

md"""
**Pain points:**
$(html"<ul>
		<li class='con'><p>Global scope is <b>persistent</b> — <em><br>&#34;Reset kernel & Run all&#34;</em></p></li>
		<li class='con'><p>File format hinders <b>version control</b> (git)</p></li>
		<li class='con'><p>Notebook from one machine <b>rarely works on another machine</b></p></li>
		</ul>")

$(html"<br><br><small><a href='https://web.eecs.utk.edu/~azh/pubs/Chattopadhyay2020CHI_NotebookPainpoints.pdf' style='font-weight: 100;'>S. Chattopadhyay et al. - <em>What’s Wrong with Computational Notebooks?
Pain Points, Needs, and Design Opportunities</em> (2020)</a></small>")

""")
	md"""## Jupyter notebooks

$body
"""
end

or for two images:

md"""$(html"<h2>Programming is easy <small style='font-size: .5em;'>(sometimes)</small></h2>")

$(two_cols(
html"<img style='max-height: 70vh; float: right;' src='https://user-images.githubusercontent.com/6933510/82732036-01e1d580-9d0b-11ea-98d2-a780b9cb7e43.gif'>",
html"<img style='max-height: 70vh; float: right;' src='https://user-images.githubusercontent.com/6933510/87420692-05d8f800-c5d6-11ea-83f6-fce68d6f10f5.png'>"))
"""