Genesis – Custom Widgets side by side

Hi,
I’m trying to create a custom homepage for a Genesis WordPress site.
I created 2 new widgets, “contact_form_widget”, and “contact_personal_widget”.
These widgets work and show up on the front-end, however I would like them side-by-side, in the same full-width section.

The way the rest of my sections work is each section is wrapped within another section.
The full-width background color of the section is placed on the outer section, and the max-width for content is placed on the inner section.

>> How can I get both widgets to be placed within the same inner and outer sections, with the widgets floated left/right?

Or is there a better way of creating this effect?

My code is below. Currently, they are in 2 separate sections.

Thank you,
Emma

/* Contact Form Widget***************/
function contact_form_widget() {
    register_sidebar( array(
        'name' => __( 'Contact Form', 'genesis' ),
        'id' => 'contactwidget',
        'description' => __( 'ContactForm', 'genesis' ),
        'before_widget' => '<section class="contact-form-widget">',
        'after_widget' => '</section>',
    ) );
 }
add_action( 'widgets_init', 'contact_form_widget' );

//* Add the Contact Form Widget in place
function contact_form_widget_visible() {
    genesis_widget_area ('contactwidget', array(
        'before' => '<section class="contact-form-widget-wrap wrap">',
        'after' => '</section>',));
    }
add_action( 'genesis_before_footer', 'contact_form_widget_visible' );

/* Contact Personal Widget***************/
function contact_personal_widget() {
    register_sidebar( array(
        'name' => __( 'Contact Personal', 'genesis' ),
        'id' => 'contactpersonalwidget',
        'description' => __( 'ContactPersonal', 'genesis' ),
        'before_widget' => '<div class="contact-personal-widget">',
        'after_widget' => '</div>',
    ) );
 }
add_action( 'widgets_init', 'contact_personal_widget' );

//* Add the Personal Contact  Widget in place
function contact_personal_widget_visible() {
    genesis_widget_area ('contactpersonalwidget', array(
        'before' => '<div class="contact-personal-widget-wrap wrap">',
        'after' => '</div>',));
    }
add_action( 'genesis_before_footer', 'contact_personal_widget_visible' );

Note: “.contact-form-widget-wrap” and “.contact-personal-widget-wrap” are the colors of the sections, while “.wrap” is the width.