bug: input inside of item gets truncated with long label on smaller viewports

### Prerequisites

- [X] I have read the [Contributing Guidelines](https://github.com/ionic-team/ionic-framework/blob/main/.github/CONTRIBUTING.md#creating-an-issue).
- [X] I agree to follow the [Code of Conduct](https://ionicframework.com/code-of-conduct).
- [X] I have searched for [existing issues](https://github.com/ionic-team/ionic-framework/issues) that already report this problem, without success.

### Ionic Framework Version

- [ ] v4.x
- [X] v5.x
- [ ] v6.x

### Current Behavior

The `ion-label` displaces the `ion-input` value. Text wrap makes no difference and does not matter.


### Expected Behavior

The `ion-input` (value) must be dominant. Both elements should always be displayed.

### Steps to Reproduce

```html

This is my number input label

This is my number input label

```

See [CodePen](https://codepen.io/infacto/pen/JjOrxBV).

### Ionic Info

No Ionic workspace. Therefore no `ionic info` CLI possible. It's Angular 12.2.14 with Ionic 5.9.2.

### Additional Information

I selected Ionic 5 but I'm using the latest Ionic version in CodePen.

Start with the CodePen reproduction and the three mentioned entry points: ion-item, ion-label, and ion-input. Reproduce the number-input case at a smaller viewport, then trace the related component styling and layout behavior. Done means the input value remains visible while the long label is also displayed in both label configurations.

Written by the indexing model from the issue text.