List tabulation

As part of a site I am working on, I have a list of articles that have a date and a headline. The structure looks like so:

<ul>
    <li>
        <time datetime=…>DATE HERE</time>
        <a href=…>HEADLINE HERE</a>
    </li>
    …
</ul>


…and my styling is like so:

li time {
        margin-inline-end: 1em;
}


The issue I am facing is that while I have a nice gap between the date and the headline, I would really like to have the headlines aligned with each other. In other words, I would need some kind of variable margin between the date and the headline so that I have a gap between them, but that a shorter date has a larger gap to keep all the headlines aligned.

Anyone know how to do this?
2023-07-23_002428.png
Was this page helpful?