2 column Section in R Markdown

Question

I'm very new at R Markdown and I'm putting together an R Markdown HTML page for some new R users at my work to give them an intro and walk them through some simple demos. While showing off things like head and tail, it ends up looking messy and long because it prints out each output one after the other. I would like them as long as other sections of my .Rmd to be split into two columns. In my research, I came across this question: 2 Column Report in R Markdown - Render HTML aside Data Frame. There was some discussion of workarounds with HTML code but I'm not at that level in HTML or CSS. I did try including

<div class="columns-2">
</div>

from the official rmarkdown documentation, but it didn't have any effect

As I was ready to give up, there was a comment on the Stack Overflow question by @Molx saying that you can separate columns with ***, but didn't give any further explanation. I tried it out in a few ways: I included the *** in the middle of my R code chunk, I separated my R code chunks and put the *** between the two. When I did the latter, the *** simply became a horizontal rule and did nothing with columns.

I'm hoping to avoid tables and CSS if possible. If anyone has any thoughts on this, I'd appreciate it.

Answer 1

rmarkdown file:

#### Put in your css file or directly in rmarkdown

<style>
  .col2 {
    columns: 2 200px;         /* number of columns and width in pixels*/
    -webkit-columns: 2 200px; /* chrome, safari */
    -moz-columns: 2 200px;    /* firefox */
  }
  .col3 {
    columns: 3 100px;
    -webkit-columns: 3 100px;
    -moz-columns: 3 100px;
  }
</style>

#### This section will have three columns

<div class="col3">
**1** one  
**2** two  
**3** three  
**4** four  
**5** five  
**6** six  
**7** seven  
**8** eight  
**9** nine  
</div>

#### This section will have two columns

<div class="col2">
```{r}
head(mtcars)
tail(mtcars)
```
</div>

Gives me this

---

Edit

To be more precise with the column elements, you can use a div for each set of elements:

Rmd file

<style>
.column-left{
  float: left;
  width: 33%;
  text-align: left;
}
.column-center{
  display: inline-block;
  width: 33%;
  text-align: center;
}
.column-right{
  float: right;
  width: 33%;
  text-align: right;
}
</style>

#### This section will have three columns

<div class="column-left">
**1** one  
**2** two  
</div>
<div class="column-center">
**3** three  
**4** four  
**5** five  
**6** six  
</div>
<div class="column-right">
**7** seven  
**8** eight  
**9** nine  
</div>

Gives me