Split navigation with Left and Right widget areas in Genesis

A user emailed me asking,

Hi Sridhar!
So, I'm wanting to place a widget area on both the left and right side of my primary menu. I've been able to place two widget areas using this code: https://sridharkatakam.com/adding-simple-social-icons-navigation-bar-genesis/
But, I'm unable to get one to float left of the primary navigation menu.
I have my logo centered within the primary navigation menu already, now I just want to float a widget on either side of the menu.
I'll attach a photo of what I'm attempting to do. I tried adding a css class to each widget, but all I see is the aside class.

In this tutorial, we shall

• register a custom Header Left widget area
• rewrite the site header so it has the site title, header left widget area, primary nav menu and header right widget areas in the HTML
• hide the site title on larger screens
• add Home menu item in the middle of nav menu and set the header image as its background
• hide the Home menu item on smaller screens

to have a left widget area, nav menu and right widget area in Genesis.

Screenshots:

Structure of the HTML output:

When expanded:

While the tutorial has been written for Genesis Sample, it should work with a few adjustments in any Genesis theme.

Step 1

Edit child theme's functions.php.

a) Decide the size of your image logo and specify twice its dimensions in the custom header add theme support function call.

In this example, I would like to display the logo 100 x 100. Hence I am going to change the width and height to 200 each.

i.e., change

// Add support for custom header.
add_theme_support( 'custom-header', array(
    'width'           => 600,
    'height'          => 160,
    'header-selector' => '.site-title a',
    'header-text'     => false,
    'flex-height'     => true,
) );

to

// Add support for custom header.
add_theme_support( 'custom-header', array(
    // 'width'           => 600,
    // 'height'          => 160,
    'width'           => 200,
    'height'          => 200,
    'header-selector' => '.site-title a',
    'header-text'     => false,
    'flex-height'     => true,
) );

Go to Appearance > Header and upload/select your logo.

b) Locate the/any function hooked to wp_enqueue_scripts and add the following in it: