How to set the width of a flex element correctly?

Question

css

Here is my block code: https://codepen.io/anon/pen/bzXPaM
There are a couple of issues that I can't solve:
1) Since flex stretches items to fill the entire container space, clicking on empty space activates the input , but I would like it to work only on the visible part. flex-shrink doesn't help, it still stretches.

2) align-items doesn't help, you can see that the text is a little higher, how to fix it?
Help, please, it feels like because of the layout everything works like that. Thanks for the answer!

Answer 1

1. Make the label only on the text, and wrap the block in something else.
2.line-height: 1