Position of two header widgets

Hi,

For a project I have 2 header widgets. One is for some social buttons and the second one is for the search box. I’ve managed to have them displayed in the header but I can’t figure out how to position them in the right way. Please see attached screen shot with the current situation and the desired one.

Screenshot

What I did so far:

1. Made two widgets ( header and zoeken (search) )
2. Added to my functions.php:

add_action( 'ava_after_main_menu', 'enfold_customization_header_widget_area' );
function enfold_customization_header_widget_area() {
    dynamic_sidebar( 'header' );
        dynamic_sidebar( 'zoeken' );
}

3. Added to my child CSS:

#header .widget {
height:24px!important;
  right: 0;
  top: 5px;
  padding: 0;
  position: absolute;
  z-index: 999;
}

/*Header zoeken settings*/
#zoeken .widget {
  height:24px!important;
  right: 0;
  bottom: 50px!important;
  padding: 0;
  position: absolute;
  z-index: 999;
}

Help is much appreciated also with the larger width of the searchbox..

Regards,

Steven