fix(ui5-*): improve vertical alignment of inline web comps

[ilhan007]

Improve vertical alignment of inline web comps by forcing same vertical-align (vertical-align: middle in this case brought by FormComponents.css).

Before:

After

Changes

• RatingIndicator, Switch, CheckBox, RadioButton, DatePicker, Slider now use vertical-align: middle as the rest of the form components
• StepInput was the only input element with width: 100% falling on next line, all the rest can stay side by side
• Text use to behave as a block element, falling on next line, due to its display: -webkit-box; => changed to display: -webkit-inline-box; to behave properly
• Slider focus placement is fixed. e.g equal space around the handles

before after

[ui5-webcomponents-bot]

🧹 Preview deployment cleaned up: https://pr-12718--ui5-webcomponents.netlify.app

[dimovpetar]

Text change looks good to me.

[kgogov]

CheckBox looks fine :)

[tsanislavgatev]

Components on my end look good.

[ui5-webcomponents-bot]

:tada: This PR is included in version v2.18.0-rc.1 :tada:

The release is available on v2.18.0-rc.1

Your semantic-release bot :package::rocket: