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.

Bắt đầu với bản tái hiện trên CodePen và ba entry point được đề cập: ion-item, ion-label và ion-input. Tái hiện trường hợp number-input ở viewport nhỏ hơn, sau đó theo dõi kiểu dáng và hành vi layout của component liên quan. Hoàn tất khi giá trị input vẫn hiển thị đồng thời label dài cũng được hiển thị trong cả hai cấu hình label.

Do mô hình lập chỉ mục viết ra từ nội dung của issue.