Search code examples
cssgithubmarkdown

is there a way to align two HTML elements side by side without CSS? How?


I was just updating my profile readme on Github, but i had a issue. I need to align two elements side by side vertically, but, when I tried to use CSS, I just found out that it's impossible to use style attr on Github's Markdown files. So, how can I align two elements side by side, vertically, without CSS? My code:

<details>
    <summary>Minhas Estátisticas no Github</summary>
    <p align="center">
        <img src="https://github-readme-stats.vercel.app/api?locale=pt-br&username=carlos3g&theme=radical&show_icons=true&include_all_commits=true" alt="Estátisticas Gerais" />
    </p>
    <p align="center">
        <img src="https://github-readme-stats.vercel.app/api/top-langs?locale=pt-br&username=carlos3g&theme=radical" alt="Techs utilizadas nos projetos" />
    </p>
</details>

I want align these two p tags


Solution

  • You use p tags which are block element by default if want to make these two images align side by side remove p tags from your code

    <details>
        <summary>Minhas Estátisticas no Github</summary>
        <p>
            <img align="left" src="https://github-readme-stats.vercel.app/api?locale=pt-br&username=carlos3g&theme=radical&show_icons=true&include_all_commits=true" alt="Estátisticas Gerais" />
    
            <img align="right" src="https://github-readme-stats.vercel.app/api/top-langs?locale=pt-br&username=carlos3g&theme=radical" alt="Techs utilizadas nos projetos">
        </p>
    </details>
    

    Note: I used the p tag to make more space between the summary title and the details

    You can also use tables if want but it's not very useful in this situation. Here a good guide to using tables in markdown