diff --git a/elements/_grouping.scss b/elements/_grouping.scss
index 42b3d3c..73f8a63 100644
--- a/elements/_grouping.scss
+++ b/elements/_grouping.scss
@@ -67,6 +67,13 @@ hr {
 	border-width: $width_border_basic 0 0;
 	border-style: solid;
 	border-color: $color_border_basic;
+
+	&.vertical {
+		display: inline;
+		height: $line_basic;
+		margin: 0 $space_double;
+		border-width: 0 $width_border_basic 0 0;
+	}
 }
 
 .hr_hidden {
@@ -286,6 +293,10 @@ div {}
 // Flex
 .flex {
 	display: flex;
+
+	&.inline {
+		@extend %flex-inline;
+	}
 }
 
 .flex_wrap {
diff --git a/global/_common.scss b/global/_common.scss
index fcb9e3a..5a45c7b 100644
--- a/global/_common.scss
+++ b/global/_common.scss
@@ -173,6 +173,18 @@
 
 
 
+// Flex & grid
+// -----------------------------------------------------------------------------
+%flex-inline {
+	display: flex;
+	flex-direction: row;
+	align-items: flex-start;
+	justify-content: flex-start;
+	gap: $space_half $space_basic;
+}
+
+
+
 // Positioned elements
 // -----------------------------------------------------------------------------
 %viewport_fixed {