Left align detail text in autocomplete menu

Any recommendations on how to left align the detail text across all completions in the autocomplete menu?

Each item is in a separate <li> which makes sense, but makes it difficult to align the detail text because the label text can be of varying width. In this case, I’m trying to position all detail text to allow space for the longest label text which is only known at runtime after the text is fetched from the server.

I’d prefer to leverage the existing autocompletion extension rather than fork it or write my own. I see how the HTML for the completion menu is built in tooltip.ts. It allows injecting more elements as described in the API, but not customizing the containing HTML structure, i.e. the <ul> & <li>.

Maybe a CSS grid with display: contents on the list items is able to do that? But that will likely cause all kinds of other issues, such as breaking the styling of selected items.