Is there anyway to align code and output side by side in Rmarkdown?

Question

I have tried to use css code below in the markdown file, but they are not align to each other and also messed up my next line of code.

Here is the sample code:

<style>
.column-left{
  float: left;
  width: 50%;
  text-align: left;
}
.column-right{
  float: right;
  width: 50%;
  text-align: left;
}
</style>

###### Header:

<div class="column-left">

```
# Header 1
## Header 2
### Header 3
#### Header 4
##### Header 5
###### Header 6
```

</div>

<div class="column-right">

# Header 1
## Header 2
### Header 3 
#### Header 4
##### Header 5
###### Header 6

</div>

##### bold and _italics_

<div class="column-left">

```
This is *Rmarkdown*!

This is _Rmarkdown_!

This is **Rmarkdown**!
```

</div>

<div class="column-right">

This is *Rmarkdown*!

This is _Rmarkdown_!

This is **Rmarkdown**!

</div>

Is there anyway to align each box of code with its output or even align each line of code with its output?

For example, the output of Header 1 and Header 2 are obviously using different amount of space, so how to either align each line between code and output or each box of code with its output?

Thank you!

Answer 1

There is probably a better way to do this (possibly with js), but this works using only html and css:

<style>
#row1{
  height: 270px;
  padding: 10px;
}

#row2{
  height: 150px;
  padding: 10px;
}

#headers{
  font-size: 22px;
}

#italics{
  font-size: 15px;
}

.column-left{
  float: left;
  height: 100%;
  width: 50%;
  text-align: left;
}
.column-right{
  float: right;
  height: 100%;
  width: 50%;
  text-align: left;
}
</style>

###### Header:

<div id="row1">

<pre id="headers" class="column-left">
# Header 1
## Header 2
### Header 3
#### Header 4
##### Header 5
###### Header 6
</pre>

<div class="column-right">

# Header 1
## Header 2
### Header 3
#### Header 4
##### Header 5
###### Header 6

</div>

</div>

##### bold and _italics_

<div id="row2">

<pre id="italics" class="column-left">
This is *Rmarkdown*!

This is _Rmarkdown_!

This is **Rmarkdown**!
</pre>

<div class="column-right">

This is *Rmarkdown*!

This is _Rmarkdown_!

This is **Rmarkdown**!

</div>

</div>

What I did:

1. Instead of r code, I wrapped the "code chunks" with the <pre> tag, which treats the code as preformatted text.

2. Wrap another <div> around each code chunk + output combination.

3. Set height of .column-left and .column-right to 100%:

4. Adjust height of #row1 and #row2 so that the code chunks align with the output

5. Optionally adjust font-size of #headers and #italics so that the code font size approximately matches with the output font-sizes