How to create a two column layout using CSS

We start off with a simple one one column web page

https://codepen.io/timothyshores/pen/LXXEQB

What my hypothetical client or employer wants is to have this page have two separate columns. The column on the left should have the title Welcome along with the content below it and the title on the right should have the title Great food along with the content below it.

When inspecting the HTML we see that that are two separate containers

By adding the following to our CSS file

.primary{
display: inline-block;
width:48%;
}
.secondary {
display: inline-block;
width:48%;
}

We end up with

There appears to be two new issues now. The title Great food

It looks a bit tight between the columns. It almost looks like the sentence jelly beans candy runs into the sentence starting with croissant macaroon pie brownie.

.primary{
display: inline-block;
width:48%;
margin-right: 30px;
}
.secondary {
display: inline-block;
width:48%;
vertical-align: top;
}
https://codepen.io/timothyshores/pen/qQQdyW

Interested in checking out the before and after code?

Before: https://codepen.io/timothyshores/pen/LXXEQB

After: https://codepen.io/timothyshores/pen/qQQdyW