Elements next to each other-CodePudding

Im trying to get these two images and text (facebook and instagram) to be one next to the other, just like the picture above, any ideias?? this isnt my code so i dont even know where to begin

ps: its going to be used in a e-mail so this is why its all inline css styles

this is how it looks

this is how i want it to look like

   <tr style='background-color: #1F3466;'>
    <td style='background-color: #1F3466;'>
        <footer style='background-color: #18A5A7;'>
            <h2 style='margin-left: 25px;font-family: sans-serif; color: aliceblue;'>Fique bem informado! </h2>
            <h3 style='margin-left: 25px;font-family: sans-serif; color: aliceblue;'>Acompanhe também o Grupo São
                Cristóvão Saúde nas redes sociais: </h3>
    
                <Footer
                style='display: flex;flex-direction: row;align-content: center;align-items: center;font-family: sans-serif;'>
                <img src='fb_logo.png' style="width:25px; height:25px; margin-left:25px" alt='facebook'/><a style='text-decoration: none;color: aliceblue;'
                    href='https://m.facebook.com/gruposaocristovaosaude/'>&nbsp;&nbsp;Facebook.com/gruposaocristovaosaude</a>
            </Footer>&nbsp;&nbsp;&nbsp;&nbsp;
            <footer style='display: flex;flex-direction: row;align-content: center;align-items: center;font-family: sans-serif;'>
                <img src='inst_logo.png' style="width:25px; height:25px; margin-left:25px" alt='instagram' /><a style='text-decoration: none;color: aliceblue;'
                    href='https://instagram.com/saocristovaosaude/'>&nbsp;&nbsp;@saocristovaosaude</a></footer>
        </footer>
    </td>
</tr>
<tr>

CodePudding user response：

Rather than having the nested tag "Footer" with display: flex twice, just move the contents of your second tag into your first one.

Something like this.


   <tr style='background-color: #1F3466;'>
    <td style='background-color: #1F3466;'>
        <footer style='background-color: #18A5A7;'>
            <h2 style='margin-left: 25px;font-family: sans-serif; color: aliceblue;'>Fique bem informado! </h2>
            <h3 style='margin-left: 25px;font-family: sans-serif; color: aliceblue;'>Acompanhe também o Grupo São
                Cristóvão Saúde nas redes sociais: </h3>
    
                <Footer
                style='display: flex;flex-direction: row;align-content: center;align-items: center;font-family: sans-serif;'>
                <img src='fb_logo.png' style="width:25px; height:25px; margin-left:25px" alt='facebook'/><a style='text-decoration: none;color: aliceblue;'
                    href='https://m.facebook.com/gruposaocristovaosaude/'>&nbsp;&nbsp;Facebook.com/gruposaocristovaosaude</a>
                <img src='inst_logo.png' style="width:25px; height:25px; margin-left:25px" alt='instagram' /><a style='text-decoration: none;color: aliceblue;'
                    href='https://instagram.com/saocristovaosaude/'>&nbsp;&nbsp;@saocristovaosaude</a>
            </Footer>
        </footer>
    </td>
</tr>
<tr>

Also as a list of changes to make this a lot easier for you:

Don't nest the footer tag, your document should only have one of these.
Get rid of your inline styles and add them to a css file.

CodePudding user response：

You could put both elements in a separate div and nest them in the parent div d-flex flex-row. Ref: https://getbootstrap.com/docs/4.0/utilities/flex/