I would approach this by structuring the HTML differently. No JS needed.

Having the icon and the header text in the same line will be inherently problematic. When the header text wraps, it's going to start again at the beginning of the line, exactly as you have demonstrated.

First, I would wrap the whole thing in a wrapper div and use that to create the 2px left border instead of using :before elements.

Then I would pull the icon div out of the p element. It would instead be inside the wrapper div. I would position it absolutely to overlap the wrapper div's left border.

I would use a header (like an h2) instead of a p for the section header, but that's not necessary to make this work.