Float fields (left/right)

Okay, I think this is what you're going for. If not, I'm sure you can take what I've done and tweak it to your preference.

Test Screenshot

So, it's easiest to ditch the float idea, and absolutely position those two fields. Remember, you have to set the wrapper to position:relative for this. (notice, I applied the styles to the containing div and not the form element itself) From there, I just positioned the two containing list items, tweaked the widths, etc. until it looked right.

So, here's what you do.

First, enable the default Gravity Forms CSS (make sure the "output CSS" option is set to yes in the GF settings page) or, if you're embedding the form via a function call, you'll need to manually enqueue the scripts by placing a script block in your functions.php file. You can find that information in the documentation on embedding a form.

http://www.gravityhelp.com/documentation/embedding-a-form/

After you've enabled the GF default CSS, you're good to go with the second part.

Remove the CSS you already have in place, and replace it with this.

#gform_wrapper_5  { margin:10px 0; border:1px solid #AEAFB2;background:#f2f2f2; position:relative;}
#field_5_3, #field_5_5 {position:absolute;}
#field_5_3 {top:0px; left:275px}
#field_5_5 {top:55px; left:275px;}
#field_5_1, #field_5_2, #field_5_4 {margin-left:10px;}
#input_5_1, #input_5_2, #input_5_3, #input_5_4 {width:240px;}
#input_5_5 {height:100px; width:244px; }
#gform_wrapper_5 .gform_footer input.button {margin-left:15px;}

That should get you rolling.

If you need additional styling help, the Visual CSS Guide is a good place to get a lay of the land and run from there.

http://www.gravityhelp.com/documentation/visual-css-guide/

Good luck.

Wonderful! I'm glad that worked for you. Let us know if you need anything else.