diff --git a/packages/main/cypress/specs/VerticalAlignment.cy.tsx b/packages/main/cypress/specs/VerticalAlignment.cy.tsx
new file mode 100644
index 000000000000..f14844d15bb9
--- /dev/null
+++ b/packages/main/cypress/specs/VerticalAlignment.cy.tsx
@@ -0,0 +1,77 @@
+import CheckBox from "../../src/CheckBox.js";
+import Switch from "../../src/Switch.js";
+import Link from "../../src/Link.js";
+import Label from "../../src/Label.js";
+import Text from "../../src/Text.js";
+import RatingIndicator from "../../src/RatingIndicator.js";
+import StepInput from "../../src/StepInput.js";
+import Button from "../../src/Button.js";
+import ComboBox from "../../src/ComboBox.js";
+import ComboBoxItem from "../../src/ComboBoxItem.js";
+import SegmentedButtonItem from "../../src/SegmentedButtonItem.js";
+import SegmentedButton from "../../src/SegmentedButton.js";
+import Input from "../../src/Input.js";
+import DatePicker from "../../src/DatePicker.js";
+import RadioButton from "../../src/RadioButton.js";
+import RangeSlider from "../../src/RangeSlider.js";
+import Slider from "../../src/Slider.js";
+import Select from "../../src/Select.js";
+import Option from "../../src/Option.js";
+import FileUploader from "../../src/FileUploader.js";
+
+describe("Vertical Alignment", () => {
+	it("tests container height to detect and avoid vertical misalignment", () => {
+		cy.mount(
+			<>
+			<div id="container">
+				<Input value="value"></Input>
+				<DatePicker value="today"></DatePicker>
+				<SegmentedButton accessibleName="Geographic location">
+					<SegmentedButtonItem>Map</SegmentedButtonItem>
+					<SegmentedButtonItem selected>Satellite</SegmentedButtonItem>
+				</SegmentedButton>
+				<ComboBox value="Bulgaria">
+					<ComboBoxItem text="Algeria" id="cbi"></ComboBoxItem>
+					<ComboBoxItem text="Argentina"></ComboBoxItem>
+					<ComboBoxItem text="Bosnia and Herzegovina"></ComboBoxItem>
+					<ComboBoxItem text="Brazil"></ComboBoxItem>
+					<ComboBoxItem text="Bulgaria"></ComboBoxItem>
+					<ComboBoxItem text="Canada"></ComboBoxItem>
+					<ComboBoxItem text="Chile"></ComboBoxItem>
+				</ComboBox>
+				<Select>
+					<Option>Option 1</Option>
+					<Option>Option 2</Option>
+					<Option>Option 3</Option>
+				</Select>
+			</div>
+
+			<div id="container2">
+				<CheckBox text="Check" checked></CheckBox>
+				<Switch textOn="On" textOff="Off"></Switch>
+				<RadioButton text="option c" checked></RadioButton>
+				<Label>Lorem ipsum dolor sit</Label>
+				<Text>Some text here</Text>
+				<Button>Click Me</Button>
+				<Link href="https://ui5webcomponents.github.io" target="_blank">Link</Link>
+				<StepInput></StepInput>
+				<FileUploader></FileUploader>
+			</div>
+
+			<div id="container3">
+				<RatingIndicator></RatingIndicator>
+			</div>
+
+			<div id="container4">
+				<RangeSlider id="range_slider1" style={{ width: "200px" }}></RangeSlider>
+				<Slider id="slider1" style={{ width: "200px" }}></Slider>
+			</div>
+			</>
+		);
+
+		cy.get("#container").should("have.css", "height", "44px");
+		cy.get("#container2").should("have.css", "height", "44px");
+		cy.get("#container3").should("have.css", "height", "48px");
+		cy.get("#container4").should("have.css", "height", "53px");
+	});
+});
diff --git a/packages/main/src/themes/CheckBox.css b/packages/main/src/themes/CheckBox.css
index 5cd7b607b1e8..17a8b03cdba0 100644
--- a/packages/main/src/themes/CheckBox.css
+++ b/packages/main/src/themes/CheckBox.css
@@ -1,5 +1,6 @@
 @import "./InvisibleTextStyles.css";
 @import "./TapHighlightColor.css";
+@import "./FormComponents.css";
 
 :host(:not([hidden])) {
 	display: inline-block;
diff --git a/packages/main/src/themes/DatePicker.css b/packages/main/src/themes/DatePicker.css
index 11ceddfe6386..b55aaa304c09 100644
--- a/packages/main/src/themes/DatePicker.css
+++ b/packages/main/src/themes/DatePicker.css
@@ -1,6 +1,7 @@
 @import "./InvisibleTextStyles.css";
 @import "./InputIcon.css";
 @import "./InputSharedStyles.css";
+@import "./FormComponents.css";
 
 :host(:not([hidden])) {
 	display: inline-block;
diff --git a/packages/main/src/themes/RadioButton.css b/packages/main/src/themes/RadioButton.css
index cf46853524bf..2cf1e9379006 100644
--- a/packages/main/src/themes/RadioButton.css
+++ b/packages/main/src/themes/RadioButton.css
@@ -1,4 +1,5 @@
 @import "./InvisibleTextStyles.css";
+@import "./FormComponents.css";
 
 :host(:not([hidden])) {
 	display: inline-block;
diff --git a/packages/main/src/themes/RatingIndicator.css b/packages/main/src/themes/RatingIndicator.css
index 3cffe8607bbc..30e759f2691c 100644
--- a/packages/main/src/themes/RatingIndicator.css
+++ b/packages/main/src/themes/RatingIndicator.css
@@ -1,3 +1,5 @@
+ @import "./FormComponents.css";
+
 :host(:not([hidden])) {
 	display: inline-block;
 	font-size: 24px;
diff --git a/packages/main/src/themes/SliderBase.css b/packages/main/src/themes/SliderBase.css
index 1649fabe8dc1..a8cd7e6ddf2d 100644
--- a/packages/main/src/themes/SliderBase.css
+++ b/packages/main/src/themes/SliderBase.css
@@ -1,4 +1,5 @@
 @import "./InvisibleTextStyles.css";
+@import "./FormComponents.css";
 
 :host([disabled]) {
 	opacity: var(--_ui5_slider_disabled_opacity);
@@ -9,7 +10,6 @@
 :host {
 	box-sizing: border-box;
 	cursor: pointer;
-	vertical-align: top;
 	width: 100%;
 }
 
diff --git a/packages/main/src/themes/StepInput.css b/packages/main/src/themes/StepInput.css
index b75d6e810894..902108a14c5b 100644
--- a/packages/main/src/themes/StepInput.css
+++ b/packages/main/src/themes/StepInput.css
@@ -5,7 +5,6 @@
 
 :host(:not([hidden])) {
 	display: inline-block;
-	width: 100%;
 	line-height: normal;
 	letter-spacing: normal;
 	word-spacing: normal;
diff --git a/packages/main/src/themes/Switch.css b/packages/main/src/themes/Switch.css
index 6c0445a42454..4a8fc7f2acd7 100644
--- a/packages/main/src/themes/Switch.css
+++ b/packages/main/src/themes/Switch.css
@@ -1,5 +1,6 @@
 @import "./InvisibleTextStyles.css";
 @import "./TapHighlightColor.css";
+@import "./FormComponents.css";
 
 :host(:not([hidden])) {
 	display: inline-block;
diff --git a/packages/main/src/themes/Text.css b/packages/main/src/themes/Text.css
index 51fde0bee10a..bf347cb863f5 100644
--- a/packages/main/src/themes/Text.css
+++ b/packages/main/src/themes/Text.css
@@ -15,7 +15,7 @@
 }
 
 :host(:not([max-lines="1"])) {
-	display: -webkit-box;
+	display: -webkit-inline-box;
 	-webkit-line-clamp: var(--_ui5_text_max_lines);
 	line-clamp: var(--_ui5_text_max_lines);
 	-webkit-box-orient: vertical;
diff --git a/packages/main/src/themes/sap_horizon/SliderBase-parameters.css b/packages/main/src/themes/sap_horizon/SliderBase-parameters.css
index aa272d218433..d9d94ac59601 100644
--- a/packages/main/src/themes/sap_horizon/SliderBase-parameters.css
+++ b/packages/main/src/themes/sap_horizon/SliderBase-parameters.css
@@ -43,7 +43,7 @@
 
 	--_ui5_range_slider_handle_active_background: var(--sapSlider_Active_RangeHandleBackground);
 	--_ui5_range_slider_active_handle_icon_display: none;
-	--_ui5_range_slider_progress_focus_top: -15px;
+	--_ui5_range_slider_progress_focus_top: -1.063rem;
 	--_ui5_range_slider_progress_focus_left: calc(-1 * (var(--_ui5_slider_handle_width) / 2) - 5px);
 	--_ui5_range_slider_progress_focus_padding: 0 1rem 0 1rem;
 	--_ui5_range_slider_progress_focus_width: calc(100% + var(--_ui5_slider_handle_width) + 10px);
@@ -64,7 +64,7 @@
 	--_ui5_slider_handle_width: 1.5rem;
 	--_ui5_range_slider_progress_focus_width: calc(100% + var(--_ui5_slider_handle_width) + 10px);
 	--_ui5_range_slider_progress_focus_height: calc(var(--_ui5_slider_handle_height) + 10px);
-	--_ui5_range_slider_progress_focus_top: -.8125rem;
+	--_ui5_range_slider_progress_focus_top: -.938rem;
 	--_ui5_slider_tooltip_bottom: 1.75rem;
 	--_ui5_slider_handle_focused_tooltip_distance: calc(var(--_ui5_slider_tooltip_bottom) - var(--_ui5_slider_handle_focus_width));
 	--_ui5_range_slider_progress_focus_left: calc(-1 * (var(--_ui5_slider_handle_width) / 2) - 5px);
diff --git a/packages/main/src/themes/sap_horizon_dark/SliderBase-parameters.css b/packages/main/src/themes/sap_horizon_dark/SliderBase-parameters.css
index aa272d218433..d9d94ac59601 100644
--- a/packages/main/src/themes/sap_horizon_dark/SliderBase-parameters.css
+++ b/packages/main/src/themes/sap_horizon_dark/SliderBase-parameters.css
@@ -43,7 +43,7 @@
 
 	--_ui5_range_slider_handle_active_background: var(--sapSlider_Active_RangeHandleBackground);
 	--_ui5_range_slider_active_handle_icon_display: none;
-	--_ui5_range_slider_progress_focus_top: -15px;
+	--_ui5_range_slider_progress_focus_top: -1.063rem;
 	--_ui5_range_slider_progress_focus_left: calc(-1 * (var(--_ui5_slider_handle_width) / 2) - 5px);
 	--_ui5_range_slider_progress_focus_padding: 0 1rem 0 1rem;
 	--_ui5_range_slider_progress_focus_width: calc(100% + var(--_ui5_slider_handle_width) + 10px);
@@ -64,7 +64,7 @@
 	--_ui5_slider_handle_width: 1.5rem;
 	--_ui5_range_slider_progress_focus_width: calc(100% + var(--_ui5_slider_handle_width) + 10px);
 	--_ui5_range_slider_progress_focus_height: calc(var(--_ui5_slider_handle_height) + 10px);
-	--_ui5_range_slider_progress_focus_top: -.8125rem;
+	--_ui5_range_slider_progress_focus_top: -.938rem;
 	--_ui5_slider_tooltip_bottom: 1.75rem;
 	--_ui5_slider_handle_focused_tooltip_distance: calc(var(--_ui5_slider_tooltip_bottom) - var(--_ui5_slider_handle_focus_width));
 	--_ui5_range_slider_progress_focus_left: calc(-1 * (var(--_ui5_slider_handle_width) / 2) - 5px);
diff --git a/packages/main/test/pages/VerticalAlignment.html b/packages/main/test/pages/VerticalAlignment.html
new file mode 100644
index 000000000000..54d7be659bb4
--- /dev/null
+++ b/packages/main/test/pages/VerticalAlignment.html
@@ -0,0 +1,253 @@
+<!DOCTYPE html>
+<html lang="EN">
+
+<head>
+	<title>ui5 webcomponents</title>
+	<meta name="viewport" content="width=device-width, initial-scale=1.0">
+	<meta charset="utf-8">
+
+	<link rel="stylesheet" type="text/css" href="./kitchen-styles.css">
+
+	<script
+		src='https://sdk.openui5.org/resources/sap-ui-core.js'
+		id='sap-ui-bootstrap'
+		data-sap-ui-libs="sap.m"
+	></script>
+	<script>
+		sap.ui.getCore().attachInit(function () {
+			new sap.m.CheckBox({ text: "Check" }).placeAt("content3");
+			new sap.m.RadioButton({ text: "Option x" }).placeAt("content3");
+			new sap.m.Switch().placeAt("content3");
+			new sap.m.Button({ text: "Click Me" }).placeAt("content3");
+			new sap.m.Label({ text: "Lorem ipsum dolor sit" }).placeAt("content3");
+			new sap.m.Link({ text: "Link", href: "https://ui5webcomponents.github.io", target: "_blank" }).placeAt("content3");
+			new sap.m.SegmentedButton({
+				items: [
+					new sap.m.SegmentedButtonItem({ text: "Opt1" }),
+					new sap.m.SegmentedButtonItem({ text: "Opt2", selected: true })
+				]
+			}).placeAt("content3");
+
+
+			new sap.m.Input({ placeholder: "Enter text here" }).placeAt("content");
+			new sap.m.DatePicker().placeAt("content");
+			new sap.m.CheckBox({ text: "Check" }).placeAt("content");
+			new sap.m.RadioButton({ text: "Option x" }).placeAt("content");
+			new sap.m.Switch().placeAt("content");
+			new sap.m.Button({ text: "Click Me" }).placeAt("content");
+			new sap.m.Label({ text: "Lorem ipsum dolor sit" }).placeAt("content");
+			new sap.m.Link({ text: "Link", href: "https://ui5webcomponents.github.io", target: "_blank" }).placeAt("content");
+			new sap.m.SegmentedButton({
+				items: [
+					new sap.m.SegmentedButtonItem({ text: "Opt1" }),
+					new sap.m.SegmentedButtonItem({ text: "Opt2", selected: true })
+				]
+			}).placeAt("content");
+			new sap.m.ComboBox({
+				value: "Bulgaria",
+				items: [
+					new sap.ui.core.Item({ text: "Algeria" }),
+					new sap.ui.core.Item({ text: "Bulgaria" }),
+			]}).placeAt("content");
+
+
+			new sap.m.VBox({
+				direction: "Row",
+				items: [
+					new sap.m.Input({ placeholder: "Enter text here" }),
+					new sap.m.DatePicker(),
+					new sap.m.CheckBox({ text: "Check" }),
+					new sap.m.RadioButton({ text: "Option x" }),
+					new sap.m.Switch(),
+					new sap.m.Button({ text: "Click Me" }),
+					new sap.m.Label({ text: "Lorem ipsum dolor sit" }),
+					new sap.m.Link({ text: "Link", href: "https://ui5webcomponents.github.io", target: "_blank" }),
+					new sap.m.SegmentedButton({
+						items: [
+							new sap.m.SegmentedButtonItem({ text: "Opt1" }),
+							new sap.m.SegmentedButtonItem({ text: "Opt2", selected: true })
+						]
+					}),
+					new sap.m.ComboBox({
+						value: "Bulgaria",
+						items: [
+							new sap.ui.core.Item({ text: "Algeria" }),
+							new sap.ui.core.Item({ text: "Bulgaria" }),
+					]}),
+				]	
+			}).placeAt("content2");
+		})
+	</script>
+
+	<script src="%VITE_BUNDLE_PATH%" type="module"></script>
+
+	<style>
+		[ui5-slider], [ui5-range-slider] {
+			max-width: 300px;
+		}
+	</style>
+</head>
+
+<body class="kitchen_openui51auto">
+	
+
+	<div style="border-block-start: 1px solid red; border-block-end: 1px solid red">
+		<ui5-checkbox id="cb1" text="ui5-checkbox without name"></ui5-checkbox>
+		<ui5-combobox id="combobox1"></ui5-combobox>
+		<ui5-date-picker id="date_picker1"></ui5-date-picker>
+		<ui5-daterange-picker id="daterange_picker1"></ui5-daterange-picker>
+		<ui5-datetime-picker id="datetime_picker1"></ui5-datetime-picker>
+		<ui5-file-uploader value="&quot;Scree.53.png&quot; "></ui5-file-uploader>
+		<ui5-input id="input1"></ui5-input>
+		<ui5-multi-combobox id="multi_combobox1"></ui5-multi-combobox>
+		<ui5-multi-input id="multi_input1"></ui5-multi-input>
+		<ui5-radio-button id="rb_1" name="rb1"></ui5-radio-button>
+		<ui5-range-slider id="range_slider1"></ui5-range-slider>
+		<ui5-select id="select1"></ui5-select>
+		<ui5-slider id="slider1"></ui5-slider>
+		<ui5-step-input id="step_input1"></ui5-step-input>
+		<ui5-switch id="switch1" text="ui5-switch without name"></ui5-switch>
+		<ui5-time-picker id="time_picker1"></ui5-time-picker>
+	</div>
+
+
+	<br>
+	<br>
+
+	webc
+	<div style="border-block-start: 1px solid red; border-block-end: 1px solid red">
+		<ui5-input value="value"></ui5-input>
+		<ui5-time-picker></ui5-time-picker>
+		<ui5-date-picker value="today"></ui5-date-picker>
+		<ui5-button>Button</ui5-button>
+		<ui5-combobox value="Bulgaria">
+			<ui5-cb-item text="Algeria" id="cbi"></ui5-cb-item>
+			<ui5-cb-item text="Argentina"></ui5-cb-item>
+			<ui5-cb-item text="Bosnia and Herzegovina"></ui5-cb-item>
+			<ui5-cb-item text="Brazil"></ui5-cb-item>
+			<ui5-cb-item text="Bulgaria"></ui5-cb-item>
+			<ui5-cb-item text="Canada"></ui5-cb-item>
+			<ui5-cb-item text="Chile"></ui5-cb-item>
+		</ui5-combobox>
+	</div>
+
+
+	<br>
+	<br>
+	webc
+	<div style="border-block-start: 1px solid red; border-block-end: 1px solid red">
+		<ui5-dynamic-date-range
+				id="last-next"
+				options="LASTDAYS, NEXTDAYS, LASTWEEKS, NEXTWEEKS, LASTMONTHS, NEXTMONTHS, LASTQUARTERS, NEXTQUARTERS, LASTYEARS, NEXTYEARS"
+		></ui5-dynamic-date-range>
+		<ui5-multi-input id="empty-mi" placeholder="Placeholder"></ui5-multi-input>
+		<ui5-multi-combobox no-validation id="multi1" accessible-name="MultiComboBox with predefined values">
+			<ui5-mcb-item selected text="Longest word in the whole universe"></ui5-mcb-item>
+			<ui5-mcb-item selected text="Cosy"></ui5-mcb-item>
+			<ui5-mcb-item text="Compact"></ui5-mcb-item>
+			<ui5-mcb-item selected text="Condensed"></ui5-mcb-item>
+			<ui5-mcb-item selected text="Longest word in the world"></ui5-mcb-item>
+		</ui5-multi-combobox>
+		<ui5-file-uploader id="fileSelector1" style="width: 350px;" multiple required>
+			<ui5-button>Upload</ui5-button>
+		</ui5-file-uploader>
+		<ui5-step-input></ui5-step-input>
+	</div>
+
+
+	<br>
+	<br>
+
+	webc
+	<div style="border-block-start: 1px solid red; border-block-end: 1px solid red">
+		<ui5-input value="value"></ui5-input>
+		<ui5-date-picker value="today"></ui5-date-picker>
+		
+		<ui5-checkbox text="Check" checked></ui5-checkbox>
+		<ui5-switch text-on="On" text-off="Off"></ui5-switch>
+		<ui5-radio-button text="option c" checked></ui5-radio-button>
+		<ui5-button>Button</ui5-button>
+		
+		<ui5-label>Lorem ipsum dolor sit</ui5-label>
+		<ui5-link href="https://ui5webcomponents.github.io" target="_blank">Link</ui5-link>
+		<ui5-text>Some text here</ui5-text>
+
+		<ui5-segmented-button accessible-name="Geographic location">
+			<ui5-segmented-button-item>Map</ui5-segmented-button-item>
+			<ui5-segmented-button-item selected>Satellite</ui5-segmented-button-item>
+		</ui5-segmented-button>
+
+		<ui5-combobox value="Bulgaria">
+			<ui5-cb-item text="Algeria" id="cbi"></ui5-cb-item>
+			<ui5-cb-item text="Argentina"></ui5-cb-item>
+			<ui5-cb-item text="Bosnia and Herzegovina"></ui5-cb-item>
+			<ui5-cb-item text="Brazil"></ui5-cb-item>
+			<ui5-cb-item text="Bulgaria"></ui5-cb-item>
+			<ui5-cb-item text="Canada"></ui5-cb-item>
+			<ui5-cb-item text="Chile"></ui5-cb-item>
+		</ui5-combobox>
+	</div>
+
+	<br>
+	<br>
+
+	webc
+	<div style="border-block-start: 1px solid red; border-block-end: 1px solid red">
+		<ui5-checkbox text="Check" checked></ui5-checkbox>
+		<ui5-switch text-on="On" text-off="Off"></ui5-switch>
+		<ui5-radio-button text="option c" checked></ui5-radio-button>
+		<ui5-button>Button</ui5-button>
+		<ui5-rating-indicator id="rating-indicator-readonly" value="1" max="3"></ui5-rating-indicator>
+		<ui5-icon name="home"></ui5-icon>
+		<ui5-tag design="Set1" color-scheme="6">
+			Tag Text
+		</ui5-tag>
+	</div>
+
+
+	webc
+	<div style="border-block-start: 1px solid red; border-block-end: 1px solid red">
+		<ui5-checkbox text="Check" checked></ui5-checkbox>
+		<ui5-switch text-on="On" text-off="Off"></ui5-switch>
+		<ui5-label>Lorem ipsum dolor sit</ui5-label>
+		<ui5-text>Some text here</ui5-text>
+		<ui5-link href="https://ui5webcomponents.github.io" target="_blank">Link</ui5-link>
+		<ui5-rating-indicator id="rating-indicator-readonly" value="1" max="3"></ui5-rating-indicator>
+		<ui5-step-input></ui5-step-input>
+	</div>
+
+	<br>
+	<br>
+	<br>
+
+	OpenUI5
+	<div id="content" style="border-block-start: 1px solid red; border-block-end: 1px solid red">
+		<!-- OpenUI5 controls will be placed here -->
+	</div>
+
+
+	<br>
+	<br>
+	<br>
+
+	OpenUI5 in VBOX
+	<div id="content2" style="border-block-start: 1px solid red; border-block-end: 1px solid red">
+		<!-- OpenUI5 controls will be placed here -->
+	</div>
+
+	<br>
+	<br>
+	<br>
+
+	Mixed
+	<div id="content3" style="border-block-start: 1px solid red; border-block-end: 1px solid red">
+		<!-- OpenUI5 controls will be placed here -->
+		<ui5-input value="value"></ui5-input>
+		<ui5-date-picker value="today"></ui5-date-picker>
+		<ui5-checkbox text="Check" checked></ui5-checkbox>
+		<ui5-switch text-on="On" text-off="Off"></ui5-switch>
+		<ui5-radio-button text="option c" checked></ui5-radio-button>
+		<ui5-button>Button</ui5-button>
+	</div>
+</body>
+</html>