title: Incremental slides do not work with a two-column layout
body: <p>I am using the <code>xaringan</code> package for <code>r</code> for a presentation:</p>
  
  <p><a href="https://cran.r-project.org/web/packages/xaringan/index.html" rel="noreferrer">https://cran.r-project.org/web/packages/xaringan/index.html</a> </p>
  
  <p>which builds upon the <code>remark.js</code> library. </p>
  
  <p>I would like to use a two column layout, i.e. something like this from the original <code>remark.js</code> teaser presentation:</p>
  
  <p><a href="https://remarkjs.com/" rel="noreferrer">https://remarkjs.com/</a></p>
  
  <p>where the original <code>css</code> rules (which are embedded in the source of the presentation) specifies the layout via:</p>
  
  <pre><code>/* Two-column layout */
  .left-column {
    color: #777;
    width: 20%;
    height: 92%;
    float: left;
  }
  .left-column h2:last-of-type, .left-column h3:last-child {
    color: #000;
  }
  .right-column {
    width: 75%;
    float: right;
    padding-top: 1em;
  }
  </code></pre>
  
  <p>The problem is that when you use <code>--</code> in one of the columns, it does not work as expected - it should trigger an incremental slide...</p>
  
  <p>This does work, bullet points are displayed incrementally:</p>
  
  <pre><code># Slide 1
  - hello
  --
  - again
  
  ---
  # Slide 2
  - and one
  --
  - more
  </code></pre>
  
  <p>But within a column it does not work:</p>
  
  <pre><code>.left-column[
  # Column 1
  - hello
  --
  - again]
  
  .right-column[
  # Column 2
  - and one
  --
  - more]
  </code></pre>
  
  <p>Next to that, in the original <code>remark.js</code> <code>css</code> specification, the right column is additionally divided by</p>
  
  <pre><code>.pull-left {
    float: left;
    width: 47%;
  }
  .pull-right {
    float: right;
    width: 47%;
  }
  .pull-right ~ p {
    clear: both;
  }
  </code></pre>
  
  <p>And again, the <code>--</code> does not work anymore, neither with incremental steps within the <code>.pull-right</code>/<code>.pull-left</code> classes nor "between" them, i.e. to display the <code>.pull-left</code> part first, than the <code>.pull-right</code> part.
  These problems do arise within the original <code>remark.js</code> and therefore also in the <code>xaringan</code> package.</p>
  
  <p>After all, it would be great to have at least incremental slides within the right column. Does anyone have any idea how to fix this? How can I modify the css to accomplish this?</p>
  
  <h3>Edit:</h3>
  
  <p>The whole markup within <code>xaringan</code>, i.e. as written in <code>rmarkdown</code> in Rstudio and then "knitted" is:</p>
  
  <pre><code>---
  title: "Title"
  author: "Myself"
  date: "`r format(Sys.Date(), '%d.%m.%Y')`"
  output:
    xaringan::moon_reader:
      css: ["default", "custom.css"]
      nature:
        highlightStyle: dracula
        highlightLines: true
        countIncrementalSlides: false
  ---
  
  ```{r setup, include=FALSE}
  options(htmltools.dir.version = FALSE)
  ```
  
  .left-column[
    ## Left column title
  ]
  .right-column[
   A whole sentence
  
  - one `Markdown` bullet point
  
  --
  
  - a second bullet point
  ]
  </code></pre>
  
  <p>Within the file <code>custom.css</code> there is only the left and right column classes nothing else, and these are copied from the teaser presentation from <a href="https://remarkjs.com/" rel="noreferrer">https://remarkjs.com/</a></p>