diff --git a/src/components/helper-line/helper-line.scss b/src/components/helper-line/helper-line.scss
index eac8846f26..8c5c2e24b2 100644
--- a/src/components/helper-line/helper-line.scss
+++ b/src/components/helper-line/helper-line.scss
@@ -18,11 +18,11 @@
 }
 
 div {
-    padding: 0.125rem 1rem 0 1rem;
     display: flex;
     justify-content: space-between;
     gap: 0.75rem;
     overflow: hidden;
+    padding: 0 1rem;
 }
 
 :host(limel-helper-line.invalid) {
@@ -36,6 +36,11 @@ div {
     margin-left: auto;
 }
 
+.helper-text,
+.counter {
+    padding-top: 0.125rem;
+}
+
 // This animates height of the helper line, from `0` to `auto`.
 // To get this animation effect, the consumer component should
 // add `hide` classed accordingly.