How do I fix this CSS alignment
This article was written in 2017. It might or it might not be outdated. And it could be that the layout breaks. If that’s the case please let me know.
I have a CSS alignment issue. I don’t know how to fix this myself. Either my CSS skills are getting rusty, or CSS is still rusty itself. Your help would be very much appreciated. Let me try to describe my problem.
On the homepage of my series of podcasts I show a list, with in each list item a name with a job title. The job title and the name align to each others’ left, while together they align to the right of the viewport. As you can see in this screenshot:
But there’s an issue with long names on small screens. On wide screens it looks like this:
Which is fine. But on a slightly smaller screen it looks like this screenshot:
Which is not fine. I want it to look like this next example:
Or, when the job title is wider it should look like this next example, of course:
I’ve tried, and I’ve failed. Please help!