How to align items to right side in MarkdownString of VSCode - visual-studio-code

Question

While making VSCode Extension I have a requirement to show decorations on a file. Then while you hover over that decoration you can see the default hover with some information you want to show. I am using the following code to create the hover using MarkDownString for VSCode. Even after using "float:right;" in the span the view comment section won't move to the extreme right of the hover. It would just stay in the left. Can someone help me with the way to make it right aligned? Screenshot added below for reference.
const myContent = new MarkdownString(`<span style='float:right;'><a href='#'>View Comment</a></span>`);
myContent.isTrusted = true;
myContent.supportHtml = true;
const decoration = { range, hoverMessage:myContent };
Screenshot
I want the highlighted red box area to be in extreme right of the hover. [The image used is just for reference].

Answer 1

After trying the same thing, I found this question still unanswered.
The MarkdownString documentation states that:
When supportHtml is true, the markdown render will also allow a safe subset of html tags and attributes to be rendered. See https://github.com/microsoft/vscode/blob/6d2920473c6f13759c978dd89104c4270a83422d/src/vs/base/browser/markdownRenderer.ts#L296 for a list of all supported tags and attributes.
Looking at the code linked, we can see that while "span" is allowed the "style" and "class" attributes, they are very strictly filtered and only allow some of the vscode built-ins to be used.
So, while styling elements with inline CSS or even a custom class might be possible, there is another approach to this - using Markdown tables, which get translated into HTML tables and allow custom alignment.
For example, what I ended up using was something like:
new MarkdownString(`
| |
| ---: |
| the very long line we want the below link to right-align to |
| [Link text](https://linktarget "Link hover message") |
`)
The idea came from the github issue linked in the the source file mentioned above.
A couple of notes:
codicons are still supported inside Markdown tables;
the HTML table generated does not expand to 100% of the hover message box, so if you want to right-align the link text with a longer line, they have to be in the same Markdown table;
Markdown table detection is very picky about spaces and newlines, you might have to play a bit with the formatting of your string for vscode to correctly transform it into a HTML table;
the Markdown table header cannot be omitted, at least that was the conclusion of my testing; it can however be empty;
the resulting HTML table might add some small invisible borders, I haven't investigated, but my alignment with other rows in the hover seemed 1px off;
trying to bypass the Markdown table creation and writing my own HTML table broke codicons support, although I haven't investigated that too much either;