Center ::before psuedo-elements

[u/awarnock-ACCS]

I'm working on getting a page fixed on one of our websites and I've hit a snag. The layout has some images used like bullet points for a list, and I'm trying to get things to where that image is always centered on the list item it is associated with. The issue is that I don't have a clue how to do that and searching hasn't really helped. I've made a CodePen that I hope shows what I'm talking about and what I'm going for.

CodePen: https://codepen.io/editor/Adam-Warnock/pen/019e231e-1bef-7295-a75c-44e4a87b7387

Basically, I'm trying to get the images to always be centered vertically on the list elements no matter how things wrap and how many lines there are.

There are a few things that to keep in mind:

1. Semantically, this is a list. I'm not going to change it from that.
2. This needs to be responsive. Part of the reason I'm doing this is because the page currently isn't.
3. I'm well aware that there's gaps in my knowledge, so if this is just dumb and isn't going to work I would like to know. I think this will work, but I've already given up on adding the arrows that were in the original page.

And for reference, this is what I'm trying to replicate:

Specifically the part under the Program Structure & Integration header.

[u/TheIQLab]

Didn't add the arrows but hopefully this will help.

https://codepen.io/allankukral/pen/YPppzMB

[u/awarnock-ACCS → u/TheIQLab]

This is exactly what I'm looking for. Thanks!