I've been trying to adapt the code presented in similar questions on this page, but the result is always some weird bad formatted table with the image inside.
I'm sure there has to be a way to set both items side to side.
You can't, especially on GitHub. As explained in the Markdown rules:
The idea for Markdown is to make it easy to read, write, and edit prose. HTML is a publishing format; Markdown is a writing format. Thus, Markdown’s formatting syntax only addresses issues that can be conveyed in plain text.
For any markup that is not covered by Markdown’s syntax, you simply use HTML itself.
That last bit seems simple enough at first. As demonstrated in this answer to the question Two columns code in Markdown you can define inline styles within raw HTML to accomplish the desired effect. However, as explained in github/Markup, after GitHub converts your Markdown to HTML:
- The HTML is sanitized, aggressively removing things that could harm you and your kin—such as
script
tags, inline-styles, andclass
orid
attributes.
In other words, in the name of security, GitHub strips any and all styling applied to your raw HTML. So while there may be multiple ways to have two elements displayed side-by-side with HTML/CSS, GitHub has specifically and intentionally disallowed you from doing so on their website.