Align two columns next to each other, in a row

Hopefully this is a newbie question.
I am trying to run through the various steps documented here Display the monthly stats and I see the two columns align on top of each other instead of next to each other. What is the recommended steps to align columns next to each other?

This issue can be closed, even though I have not found a solution to align two columns next to each other in a row.

You need to set Size of the column lower than 12 in order to have additional columns in the same row:

I strongly suggest you to get familiar with: https://getbootstrap.com/docs/4.0/layout/grid/

Thank you @enchev for your input.