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>

You stop content from using up the space below your second column by adding an empty div below your second column that adds the clear style, thus disabling reflow from elements further below.

<div style="clear: both;"></div>

I found out about this from here: https://css-tricks.com/all-about-floats/