Vertical align icon to the right of header text

Question

I am trying to align the YouTube logo to the right of text. Currently, the logo is displayed underneath the text - like this.

Using flex for the div works, but is not responsive for tablet/mobile as the logo is presented far to the right, as opposed to right next to the text.

How could I solve this? This here is the logo I am using.

<div style="align-items:center;">
    <h3 style="vertical-align:middle">Our Business Opportunity</h3>
    <a href="https://www.youtube.com">
        <img style="vertical-align:middle" src="assets/img/youtube_icon.png" width="35" height="35" />
    </a>
</div>

Answer 1

Flex works, if you don't specify the justify-content property or give it its default value "flex-start".

Try this:

<div style="display: flex;">
    <h3 style="vertical-align:middle">Our Business Opportunity</h3>
    <a href="https://www.youtube.com">
    <img style="vertical-align:middle" src="assets/img/youtube_icon.png" width="35" height="35" />
    </a>
</div>

Now you only need to add some space between your h3 and the image.