Support space-between in form field

[Misiu]

Feature Request

I'm trying to create this type of UI:

with web components, but unfortunately it isn't easy doable.
I was suggested to use formfield but this gives me this:

The label is on the other side and there is no space between.

I got a suggestion from @asyncLiz (in material-components/material-web#999) to create this FR and ask to add mdc-form-field--space-between that would allow easy creating such UI.

This type of UI is presented at official material.io site: https://material.io/components/selection-controls/#switches so I think there should be first-class support for it.

Proposed solution

Alternatives considered

Additional context

My main goal is to have support for this in https://github.com/material-components/material-components-web-components, but I think if this will be addressed here then the next step is adding support in web components.

[asyncLiz]

Proposed solution would be to add the following CSS:

.mdc-form-field--space-between {
  justify-content: space-between;
}

[asyncLiz]

@Misiu we'll need to prioritize resources for this, but it should be a relatively easy feature to add if you want to take a shot at a pull request.

[Misiu]

@asyncLiz something like this: https://jsfiddle.net/Misiu/quzgcsev/25/ ??

I never did PR to this repo, but I can try if the results are ok with you 🙂