Stuck on positioning these items, CSS Grid help needed

1

Hiya, here’s the pen;

What would you do differently? I am trying to get the symbol to be beside the font, then I need to decrease the gap between but I am guessing I’ll use margin-bottom for that.

Mainly just need help figuring out how to make a div with a 2 columns, 1st column for the image and the second for the two bits of text.

I am trying with grid-template-areas to do something like;

“i p p p”
“i o o o”

So that the image is in the top “i” section and the writing next to it.

Any advice needed, i think im pretty close to achieving it I just cant get my head around why the symbol wont budge.

This is the site i am copying;

2

Updated pen;

Please still see if this is the an ok method I am applying, if it is I really just want to know how to decrease the gap between the title and paragraph?

3

Or I could just do this and put it all in the one div, but then I will be formatting the strings in css rather than having a header with a

below which I thought would be best practice?

**

image
image1560×977 71.3 KB
**