[Bug]: Required field label sometimes renders asterisk on next line

[kellencheng-Adobe]

Code of conduct

• I agree to follow this project's code of conduct.

Impacted component(s)

sp-field-label

Expected behavior

Every time a required field is rendered, the asterisk signifying requirement should render inline with the text.

Actual behavior

Upon rendering, sometimes the asterisk on the FieldLabel renders on the next line. Has been seen on safari and safari for ipad, other browsers have not been noticed.

Screenshots

What browsers are you seeing the problem in?

Safari

How can we reproduce this issue?

1. Render the field label with required attribute in safari
2. May need to retry a few times for the asterisk to go to the next line

Sample code or abstract reproduction which illustrates the problem

<sp-field-label required for="id">Choose a class</sp-field-label>

Note: usage is within a flex container when discovering this issue

Severity

None

Logs taken while reproducing problem

No response