Help with flexbox

HTML-CSS
1

I am struggling with flexbox at the moment. I’ve walked away half a dozen times and still can’t get it to function like I expect it should.
What I am trying to do is give some more white space in between the details of name/ and my name. I dont want it to look so squished together.
image
heres my pen: https://codepen.io/shawna-rowe/pen/gBzdgV
Ive sifted through the w3c flexbox tutorial and tried a few different routes, none of which worked as I expected.
I should mention, I would rather stay away from the margin property for this portion I am working on.

2

You can simply give your h4s margin-right: 1rem;

3

I want the h4 where it is, but the details after that I want spaced out a bit and not sitting right on top of the h4.
Similar to this:
image

4 
h4 {
  margin-right: 20px;
}

div p {
  padding-top: 15px;
}

This should accomplish what you’re looking at. But you’d likely want to go back in and make them target specific classes so it doesn’t hit every p element you add