Browser Resizing Breaks Form CSS

I would try changing the form css to use relative positioning and percentages, instead of pixels?

Relative positioning and percentages doesn't do the trick.  The only behavior I can override is the font-size increase to 18px.  The form still changes to single-column when the window size is ~500px or less.

Figured out how to solve the issue.  For anyone else who may encounter this:

You will need to include the following block on your page.  If adding to a template, make sure to use !important so that it is not ignored when the forms2.0 css is loaded.

@media only screen and (max-width: 480px), only screen and (max-device-width: 480px), only screen and (max-device-height: 480px) {

.mktoForm .mktoFormCol {
    float: left;
}
.mktoForm .mktoFormRow .mktoFormCol {
    clear: none;
}

.mktoForm, .mktoForm * {
    padding: 0px;
}

// This margin is to align the labels with the fields
.mktoForm .mktoFormRow .mktoRequiredField .mktoAsterix {
    margin-left: 10px;
}

// This part prevents the text resizing.  The margin is to restore the gutter/offset between columns
.mktoForm input[type="url"], .mktoForm input[type="text"], .mktoForm input[type="date"], .mktoForm input[type="tel"], .mktoForm input[type="email"], .mktoForm input[type="number"], .mktoForm textarea.mktoField, .mktoForm select.mktoField {
    font-size: 13px;
    margin-left: 10px;
}

}

You may also have to use 'html {-webkit-text-size-adjust:none}' so that text does not resize on mobile devices as well.