How to use two-column layout with reveal.js?

Question

I use reveal.js and write my slides in Markdown code. Now I want to display my content (text, unordered list of bullet points or even an image) in a classical two-column text layout. I would prefer a solution which may be more complex in initial configuration as long as the actual writing of content in Markdown remains easy.

Since I prefer not to run a local server, I write my markdown within the main HTML file.

Update: As the first answer indicates this should be achieved with CSS. (I updated my question accordingly.) Still, I couldn't find any description how to do it with CSS.

Answer 1

I am using CSS flex, it is working fine.

<style>
.container{
    display: flex;
}
.col{
    flex: 1;
}
</style>

<div class="container">

<div class="col">
Column 1 Content
</div>

<div class="col">
Column 2 Content
</div>

</div>

UPDATE:

Since pandoc supports fenced div,

::: {.container}
:::: {.col}
Column 1 Content
::::
:::: {.col}
Column 2 Content
::::
:::

For the style, we can either use flex or grid, both work fine.

Using flex

<style>
.container{
  display: flex;
}
.col {
  flex: 1;
}
</style>

Using grid

<style>
.container{
  display: grid;
  grid-auto-flow: column;
}
</style>