Revise form inline error messaging so it doesn't cause associated fields to move

[sydk-adhoc]

Description

Include a high-level description of the issue.

• What did you expect to happen?
  • When I use a CMSDS form field and inject an error, the message should display, but the field should remain exactly where it was originally rendered.
• What happened instead?
  • The form field moves to make room for the error message.
• What would you like to see changed?
  • The pattern revised so that inline error messages don't cause form fields to move

Include any benefits, challenges, or considerations. This can be short and sweet.

Steps to reproduce the issue

Storybook pages that could demo this are broken

• Create a simple test page with the CMSDS
• Add a text field with a label and a way to update its errorMessage (prop, assuming React)
• Change errorMessage from a blank string to anything you want
• The text field moves to make room for the error message (below the label and above the field)

[jack-ryan-nava-pbc]

@sydk-adhoc thanks for raising this issue.

Can you explain a little bit more what the exact issue is? Is it that other form fields within the form are moving? Or is it that the element that has the error is moving when the error text is added? Also, where is the error text being added, below or above the field?

[sydk-adhoc]

is it that the element that has the error is moving when the error text is added?

yes

where is the error text being added, below or above the field?

above

Example