How to align everything in one line

As per your recommendation, i have created my blog post heading with header element and use gp social share icon for placing social sharing button in heading.

Here is the current code i am using in the element.

<h1>{{post_title}}</h1>
[page_hero_gravatar] {{post_author}} {{post_date}} [gp-social]

But currently social icon is not aligned in meta info line.

Can you help me in aligning social icon and reducing the size of meta info