How to get 'collumns to align'?

In my lists they contain the title of each webpage and their publication date.

Example of my code:

<a href="{{ .Permalink }}">{{ .Title }}</a>
<time>{{ .Date.Format "02 Janurary 2006" }}</time>

How make list looks:
How to make pasta   25 December 2023
How to make apple sauce   21 December 2023

What I’d like my list to look like so:
How to make pasta      25 December 2023
How to make apple sauce   21 December 2023

It’s an styling/CSS issue, I’d recommend asking this on other place, e.g. StackOverflow.

BTW, the date format is incorrect, it should be 02 January 2006.

EDITED:

You cloud easily use the flex to implement it, you’ll need tweak it a little bit.

{{ range site.RegularPages }}
<div class="post">
  <a class="post-title" href="{{ .Permalink }}">{{ .Title }}</a>
  <time class="post-date">{{ .Date.Format "02 January 2006" }}</time>
</div>
{{ end }}
<style>
  .post {
    display: flex;
    justify-content: space-between;
  }

  .post-title {
    font-weight: bold;
    color: black;
    text-decoration: none;
  }
</style>

image