[Bug]: [Textfield] [Quiet] Space between text and the icon is not the same as default Textfield

### Code of conduct

- [X] I agree to follow this project's code of conduct.

### Impacted component(s)

Textfield

### Expected behavior

In quiet variant, the space between text and valid/invalid icon should be same as the default variant

### Actual behavior

In quiet variant, there is not space between text and valid/invalid icon

### Screenshots

_No response_

### What browsers are you seeing the problem in?

Microsoft Edge

### How can we reproduce this issue?

1. Go to https://studio.webcomponents.dev/edit/collection/fO75441E1Q5ZlI0e9pgq/EcE2Yrwz0MDIGkCzbyvl/src/index.ts?p=stories
2. Open Textfield story
3. Overfill the Textfield default variant and check the gap between the truncated text and the invalid/valid icon.
4. Do the same for Textfield quiet variant. You will need to add `invalid` and `valid` attributes to test this.

### Sample code or abstract reproduction which illustrates the problem

_No response_

### Severity

None

### Logs taken while reproducing problem

_No response_

Open the linked Web Components Studio reproduction and inspect the Textfield story, comparing default and quiet variants with valid and invalid attributes. Trace the Textfield implementation from that story to locate the styling responsible for the icon gap. Done means the quiet variant has the same space between truncated text and the valid or invalid icon as the default variant.

Written by the indexing model from the issue text.