r - How to export RMarkdown file to HTML document with two columns?

Question

I am putting together an R Markdown HTML page for some new R users at my work to give them an introduction 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. There was some discussion of workarounds with HTML code I did not understand.

I did try including:

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

from the official rmarkdown documentation, but it did not 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 it did not 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 am hoping to avoid tables and CSS if possible.

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