I have a form that has check box fields with comment fields in a line. The form looks great on a pc, but on a tablet, the comments boxes are not aligned properly. I have tried changing the width of fields multiple times as well as the total form width, but the comment boxes still do not line up.

Here's my CSS for the first field (same for all fields below):

#q31 {display: inline-block; width:45%}
#q31 .cf-label {width: 75%}
#q31 .cf-field {min-width: 5px; width: 25%}
#q61 {float: right; display: inline-block; width:55%; padding-bottom: 9px}
#q61 .cf-label {width: 25%}
#q61 .cf-medium {width: 100%}

Sorry for the bad picture.