Woocommerce custom checkout fields how to put them next to each other?

Question

Hi guys I am making a custom form in woocommerce when checking out. I want to make my fields next to each other. How do I accomplish this? This is what I have now and it just places them under each other

add_action( 'woocommerce_before_checkout_billing_form', 'checkoutFields' );

function checkoutFields( $checkout ) {

    echo '<div id="my-custom-step"><h2>' . __('My Field') . '</h2>';

    woocommerce_form_field( 'orgin_firstname', array(
        'type'          => 'text',
        'class'         => array('orgin_firstname form-row-first'),
        'label'         => __('First Name'),
        'placeholder'   => __(''),
        'required'      => true,
        ), $checkout->get_value( 'orgin_firstname' ));

    woocommerce_form_field( 'orgin_lastname', array(
        'type'          => 'text',
        'class'         => array('orgin_lastname form-row-last'),
        'label'         => __('Fill in this field yo'),
        'placeholder'   => __('Enter something '),
        ), $checkout->get_value( 'orgin_lastname' ));

    echo '</div>';

}

The way I add these fields might be important as well. I am presently doing this:

    jQuery(function(){
        jQuery(".orgin_firstname").detach().appendTo(".customSteps") //this is my div I am putting them in
})
    jQuery(function(){
        jQuery(".orgin_lastname").detach().appendTo(".orgin_firstname")
})

Answer 1

I realised my mistake was appending to the orgin_firstname when it should have been to custom steps.