Need help creating a multiple repeating field meta box

Hi, hoping for a little help. I'm wanting to build a meta box that has two fields,title and time basically. It's for an agenda so time of item and item itself. I've got it to a point where I can add a new row of the two fields and the data is saved and useable I'm sure. The ID numbers are matching up so I can use it on the front end. My problem is, other then the "ENTER" key no longer working on Treehouse while writing this, is that, in the back end, the time fields are stacked on top of each other, then the item fields are stacked below. They're not sitting in a nice row. Am I so far down the wrong tunnel I can't see where I've come from to start again? I feel I am.

add_action('add_meta_boxes','create_agenda_meta');

/* Adds a box to the main column on the Post and Page edit screens */ function create_agenda_meta() { add_meta_box('agenda_meta','Agenda','build_agenda_meta','product','normal','default'); }

/* Prints the box content */ function build_agenda_meta() { global $post;

//get the saved meta as an arry
$agenda_time = get_post_meta($post->ID,'agenda_time', true);
$agenda_item = get_post_meta($post->ID,'agenda_item', true); ?>

<?php $c = 0; if (count($agenda_time) > 0){ if(is_array($agenda_time)){ foreach($agenda_time as $item){ if (isset($item['title'])){ $c = $c +1; printf('<div class="row">%1$d<label for="agenda_time">Time: </label><input type="text" id="agenda_time" name="agenda_time[%1$d][title]" value="%2$s" /></div>', $c, $item['title']); } }

$c = 0;
foreach($agenda_item as $item){ if (isset($item['title'])){ $c = $c +1; printf('<div class="row">%1$d<label for="agenda_item">Item: </label><input type="text" id="agenda_item" name="agenda_item[%1$s][title]" value="%2$s" /><span class="remove button button-primary button-small" style="margin-left:10px; cursor:pointer;">%3$s</span></div>', $c, $item['title'], __('Remove item'));

        }
    }
}

} echo $c; ?> <span id="here"></span> <span class="add button button-primary button-small" style="cursor:pointer;"><?php _e('Add item'); ?></span> <div id="publishing-action"> <input name="original_publish" type="hidden" id="original_publish" value="Update"> <input name="save" type="submit" class="button button-primary button-small" id="publish" accesskey="p" value="Save Agenda"> </div> <script> var $ =jQuery.noConflict(); $(document).ready(function() { var count = <?php echo $c; ?>; $(".add").click(function() { count = count + 1;

            $('#here').append('<div class="row"><label for="agenda_time">Time: </label><input type="text" id="agenda_time" name="agenda_time['+count+'][title]" value="" /><label for="agenda_item">Item: </label><input type="text" id="agenda_item" name="agenda_item['+count+'][title]" value="" /><span class="remove button button-primary button-small" style="margin-left:10px; cursor:pointer;">Remove Item</span></div>' );
            return false;
        });
        $(".remove").live('click', function() {
            $(this).parent().remove();
        });
        console.log(count);
    });
    </script>
</div>
<style>

.row{ width:30%; border:1px solid red } </style>
<?php

}

/* Do something with the data entered */ add_action('save_post', 'save_agenda_meta');

/* When the post is saved, saves our custom data */ function save_agenda_meta($post_id){

$agenda_time = $_POST['agenda_time'];
update_post_meta($post_id,'agenda_time',$agenda_time);
$agenda_item = $_POST['agenda_item'];
update_post_meta($post_id,'agenda_item',$agenda_item);

}