Remove styles from labels

[cecilia-donnelly]

In general, styles should not be attached directly to the label element. In the course of updating and merging #583, we found a specific problem caused by the label styling. Labels are all being floated left, meaning that in some cases, the newly added labels are appearing to the left of the radio buttons.

We can work around this, but in the future we should not be adding styles to plain label elements. Those styles should either go in classes which can be attached to labels or even on wrapper divs around them.

Thanks to @PaulMorris for thinking through and explaining this!

[PaulMorris]

Thanks @cecilia-donnelly ! A couple of points to add:

The current CSS rules tend to give labels a fixed width and that often causes the text to wrap when we don't want it to, when adding a new label.

Labels are unstyled by default (like spans) and it's best to keep them that way, since they are used for accessibility, so you need to use them in various places on the page. Ideally labels would only be used for accessibility purposes and other tags would be used for structure/layout purposes (separation of concerns). Or at least it would be better if the styles were applied to labels via classes rather than to the label itself.

Here's a screenshot showing the float and width issues when adding a label tag to radio buttons:

And here's what it should look like:

[jasonaowen]

Another example of this problem, I think, which is found on the Facility Credentials step of a Child And Teen Checkup Clinic enrollment application:

(found while reviewing #718)