I have successfully implemented CSS flex for my layout.

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

<div class="container">

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

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

</div>

UPDATE:

Now that pandoc supports fenced divs,

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

For the styling, flex or grid can be used interchangeably with success.

Using flex

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

Using grid

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

In my custom.css file, I defined two unique IDs: #left and #right, which were linked to my reveal.js presentation using the css: custom.css field in the YAML header.

#left {
  left:-8.33%;
  text-align: left;
  float: left;  
  width:50%;
  z-index:-10;
}

#right {
  left:31.25%;
  top: 75px;
  float: right;
  text-align: right;
  z-index:-10;
  width:50%;
}

To achieve a dual-column layout, I included div elements with the corresponding IDs (#left and #right) in my markdown document.

<div id="right">

- This allows for placing two graphs on a slide
- Alternatively, it can display two columns of text
- All achieved through the use of div elements

</div>

https://i.sstatic.net/u759j.png

.multiCol {
    display: table;
    table-layout: fixed; // maintains consistent width
    width: 100%;
    text-align: left; // personal preference for alignment
    .col {
        display: table-cell;
        vertical-align: top;
        width: 50%;
        padding: 2% 0 2% 3%; // spacing between columns
        &:first-of-type { padding-left: 0; } // no padding on the first column
    }
}

Add this code to your custom theme right before

// Theme template ------------------------------
@import "../template/theme";
// ---------------------------------------------

How to use? - simple! Can be used with any number of columns:

<section>
    <h3>Creating two-column layouts (> full-width heading)</h3>

     <div class='multiCol'>
        <div class='col'>
            Gallia est omnis divisa in partes tres, quarum unam incolunt Belgae, aliam Aquitani, tertiam qui ipsorum lingua Celtae, nostra Galli appellantur.
        </div>
        <div class='col'>
             Qua de causa Helvetii quoque reliquos Gallos virtute praecedunt, quod fere cotidianis proeliis cum Germanis contendunt, cum aut suis finibus eos prohibent aut ipsi in eorum finibus bellum gerunt.
        </div>
     </div>
     
    Additional full-width text follows. You can also create:
    
    <div class='multiCol'>
        <div class='col'>Works for 3 columns too...</div>
        <div class='col'>...as demonstrated in...</div>
        <div class='col'>...this example.</div>
    </div>
</section>

• No need for floats
• No need for clearfix hacks
• Responsive design (using percentages only)
• Suitable for 2, 3, 4 columns and more...

<table> is often considered outdated due to historical misuse in layout, but as a property layout:table, it has valid uses, offers simplicity, and is widely supported.

The CSS Grid Layout is a powerful tool that allows for creating highly flexible layouts, including two-column formats and more complex structures.

To implement a simple two-column layout, you can use the following CSS code. This snippet sets up two columns with equal width (each 1 fraction unit - 1fr) and a gutter space of 10px between them.

.twocolumn {
   display: grid;
   grid-template-columns: 1fr 1fr;
   grid-gap: 10px;
   text-align: left;
}

This CSS class can then be applied as shown below:

<section>
  <h2>Section Title</h2>
  <div class="twocolumn">
    <div>
      Content in Column One
    </div>
    <div>
      Content in Column Two        
    </div>
  </div>
</section>

To tackle the issue, I successfully implemented a solution using two floating <div> elements:

<section>
  <div style="text-align: left; float: left;">
    <p data-markdown>- This is my first left element</p>
    <p data-markdown>- This is my second left element</p>
    <!-- additional Elements -->
  </div>

  <div style="text-align: right; float: right;">
    <p data-markdown>- This is my first right element</p>
    <p data-markdown>- This is my second rightelement</p>
    <!-- more Elements -->
  </div>
</section>

Through experimentation, I discovered that in order to include markdowns within the div container, it's necessary to enclose the elements in p tags. Placing data-markdown into the parent section tag will not be recognized inside the div.

I trust this information proves beneficial!

Here is a clever trick I discovered for displaying an element as if it's part of a column layout:

Text can be positioned to the right <!-- .element: style="float: right; width: 40%" -->

Text can also go on the left column <!-- .element: style="width: 40%" -->

Unfortunately, this method doesn't work as expected when trying to display multiple elements on the right side.

While I didn't fully grasp your message, it seems like you might find the solution in a post by ramnathv.

---
layout: slide
---
{{{ content }}}
<div class='left' style='float:left;width:{{left.width}}'>
 {{{ left.html }}}
</div>
<div class='right' style='float:right;width:{{right.width}}'>
 {{{ right.html }}}
</div>

This approach worked successfully for me.