Proposal for a more usable Select+Label

[topherfangio]

I've been playing around with the new Label functionality and really love it!

But I noticed that the Label+Select (or Select+Label) doesn't have the best user experience.

Label+Select

In the Label+Select version, you can only click on the right side of the element to select it.

Select+Label

Vice versa, in the Select+Label version, you can only click the left side. But also, the dropdown arrow is on the right and you can't click the arrow.

Proposed

I propose a modification which enables you to select anywhere inside the box by using a combination of clever positioning, text-right for the Label+Select, and pointer-events: none for the labels (https://play.tailwindcss.com/yx19dpdFJ3)

Benefits

1. You can click anywhere on the component to open the dropdown (including labels and the caret)
2. It feels more natural for the dropdown to open across the entire component and not just part of it
3. The developer can adjust the padding to fine-tune how it looks for each input if they really want to