How to create a header element with custom alignment

Hello, I am looking to create a custom header element for my blog posts. The header should look something like this: https://in.bestreviews.guide/glucometers
The header text should be parsed from the post title. So, that if the post title is “Best 10 Glucometers in India”, then the “Best 10” should be in a single line with a different color, and then the product name “Glucometer” in the next line, and finally the current month and year in the last line.
The header text should be aligned to the left.

What will be the best way to achieve this?

Thanks in advance 🙂

The page I need help with: [log in to see the link]