force column break in RMarkdown ioslides {.columns-2} layout

Question

When preparing a presentation with RMarkdown's ioslides, I encountered a problem which I have not been able to find a solution for. This answer did also not solve this specific problem.

Sometimes, two-column layouts are best to explain something with an image on one side and text on the other. However, As in the following example, the column breaks do not appear to work as desired.

Is there any way to force columnbreaks at a specific point? I have thought about increasing the image height on the right, but unfortunately that sometimes is not an option.

---
title: "Some stange column break"
output: 
  ioslides_presentation:
    widescreen: true
---

## Slide Title {.columns-2 .smaller}
### Slide Subtitle

>- Some bullet points which take up some space space space space space space space

>- on the column on the left

>- which are then wrapped to the right column. 

>- *Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.*

>- line break after this longer bullet point but intead it breaks in some strange place even though it would have space at the bottom of the left column!

<!-- the columns should break here -->

```{r, echo = FALSE, out.width = "470px"}
plot(mtcars)
```

Answer 1

I have used two methods in the past, both answers in the question you linked. Am I missing something about why these didn't meet your needs?

Method 1 seems to be what you're after, but I personally have trended toward using method 2 because I like the flexibility of having different width columns.

Note: I have only tested these methods using the ioslides format

---

Method 1: forceBreak, inline style tags

This requires an additional CSS class defined, which you can do inline at the beginning of your document.

---
title: "Untitled"
output: 
  ioslides_presentation:
      widescreen: true
---

<style>
.forceBreak { -webkit-column-break-after: always; break-after: column; }
</style>


## Slide Title {.columns-2 .smaller}
### Slide Subtitle

>- Some bullet points which take up some space space space space space space space

>- on the column on the left

>- which are then wrapped to the right column. 

>- *Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.*

>- line break after this longer bullet point but intead it breaks in some strange place even though it would have space at the bottom of the left column!

<p class="forceBreak"></p>

```{r, echo = FALSE, fig.width=4.7}
plot(mtcars)
```

Method 2: HTML tags

This method doesn't require any additional CSS definitions or external files.

---
title: "Untitled"
output: ioslides_presentation
---

## Another Method for Two Column Layouts

<div style="float: left; width: 40%;">
+ This text is on the left
</div>

<div style="float: right; width: 60%;">
+ This text is on the right
</div>