Header widget move to header meta area

Hi i have followed the documentation to add a header widget.

Firstly the widget gets added just under the logo and i cant seem to move it with the following code:

#header .widget {
left: 50%;
padding-top: 0;
position: absolute;
top: 0;
transform: translate(-50%);
z-index: 999;
}

I would like to add content in the same area as the phone number which i have placed on the right. I would like to place the widget content on the left of the extra element.