Top bar - set email left side. social icons centre. cta buttons right side

I want those top bits neatly arranged so on desktop

The email is the left side. Social icons are in the middle. The buttons are on the right side

Also can i make it smaller for mobile like this

Hello there,

Try adding this CSS code to Appearance > Customize > Additional CSS from dashboard.

    @media only screen and (min-width: 1025px) {
      .header-contact .header-contact-info {
        width: 210px;
      }
      .header-contact .header-contact-info .header-email {
        float: left;
      }
      .header-contact .social-navigation > div > ul {
        margin-left: -125px;
        text-align: left;
        position: relative;
      }
      .social-navigation li.top-menu-cta,
      .social-navigation li.top-menu-cta.button2 {
        position: absolute;
        top: 0;
        right: 130px;
      }
      .social-navigation li.top-menu-cta.button2 {
        right: 0;
      } 
    }

Regards,
Kharis

Thanks!

Is there any way to also fix the mobile mode?