[EuiDescribedFormGroup] Allow custom widths to be set

[gjones]

Summary
Currently EuiDescribedFormGroup is a 50/50 split between the label (left) and the form/action area (right). I'd like to suggest that we allow a more specific breakdowns to be set.

Our problem
In it's default state, there's not enough space in the right side for more complex actions to be taken. When maxWidth:full is set, there's enough space on the right but now there's too much space on the left and the label is often isolated.

Proposed solution
Handle the label width with a prop that takes percentage, an example might be labelWidth: 35. This would give the label width 35% and automatically assign the right side the remaining 65%.

This would allow us in Cloud to do something like this:

Thoughts?

cc @cchaos @snide

[ODAVING]

I think I'll be able to handle this.

[cchaos]

We talked a bit about this at EAH and the main issue is the EuiDescribedFormRow's fullWidth property continues to grow both columns equally (50%). However, the left side (the description side) should really max out at a certain point.

However, I don't think the solution would be to make the consumer think of the proper proportions but to actually initiate those proper proportions. But instead we have a couple different pre-determined sizing like "half" vs "third". Then the left side will probably also need a solid min-width to ensure it doesn't get too skinny.

[elizabetdev]

This issue was closed by #3717.

[cchaos]

I actually would like to keep this one open because of this comment I made on that PR:

I think is a fine way to allow customization of those flex items and a pattern we have started to establish. Though, I do think we (EUI) should add some top-level quick props for establishing some helpful ratios

[github-actions]

👋 Hey there. This issue hasn't had any activity for 180 days. We'll automatically close it if that trend continues for another week. If you feel this issue is still valid and needs attention please let us know with a comment.