diff --git a/packages/dnb-ui-lib/src/components/button/Button.js b/packages/dnb-ui-lib/src/components/button/Button.js
index dd607bff56c..6abda6093ba 100644
--- a/packages/dnb-ui-lib/src/components/button/Button.js
+++ b/packages/dnb-ui-lib/src/components/button/Button.js
@@ -307,16 +307,6 @@ class Content extends PureComponent {
           {text}
         </span>
       )
-    } else {
-      ret.push(
-        <span
-          key="button-helper"
-          className="dnb-button__helper"
-          aria-hidden
-        >
-          &zwnj;
-        </span>
-      )
     }
 
     if (icon) {
diff --git a/packages/dnb-ui-lib/src/components/button/style/_button.scss b/packages/dnb-ui-lib/src/components/button/style/_button.scss
index 0d4296aeedd..e58788e304e 100644
--- a/packages/dnb-ui-lib/src/components/button/style/_button.scss
+++ b/packages/dnb-ui-lib/src/components/button/style/_button.scss
@@ -47,10 +47,6 @@
   font-size: var(--font-size-small); // has to be 16px
   line-height: var(--button-height--small);
 
-  &__helper {
-    @include helper();
-  }
-
   &__icon {
     svg:not([width]):not([height]) {
       width: var(--button-icon-size);
diff --git a/packages/dnb-ui-lib/src/components/checkbox/Checkbox.js b/packages/dnb-ui-lib/src/components/checkbox/Checkbox.js
index 68d15b930c1..4a2e9a27a1e 100644
--- a/packages/dnb-ui-lib/src/components/checkbox/Checkbox.js
+++ b/packages/dnb-ui-lib/src/components/checkbox/Checkbox.js
@@ -7,6 +7,7 @@ import React, { Component } from 'react'
 import PropTypes from 'prop-types'
 import classnames from 'classnames'
 import keycode from 'keycode'
+import AlignmentHelper from '../../shared/AlignmentHelper'
 import {
   isTrue,
   makeUniqueId,
@@ -269,9 +270,7 @@ export default class Checkbox extends Component {
             />
           )}
 
-          <span className="dnb-checkbox__helper" aria-hidden>
-            &zwnj;
-          </span>
+          <AlignmentHelper className="dnb-checkbox__helper" />
 
           <span className="dnb-checkbox__inner">
             {label_position === 'left' && statusComp}
diff --git a/packages/dnb-ui-lib/src/components/checkbox/style/_checkbox.scss b/packages/dnb-ui-lib/src/components/checkbox/style/_checkbox.scss
index 7240cc415bb..8db79b9cd1e 100644
--- a/packages/dnb-ui-lib/src/components/checkbox/style/_checkbox.scss
+++ b/packages/dnb-ui-lib/src/components/checkbox/style/_checkbox.scss
@@ -21,12 +21,6 @@
     flex-direction: column;
     align-self: center;
   }
-  &__helper {
-    @include helper();
-
-    // since we don't have a vertical state, we set it to vertical by default
-    @include helperVertical();
-  }
 
   &__shell {
     user-select: none;
diff --git a/packages/dnb-ui-lib/src/components/date-picker/DatePicker.js b/packages/dnb-ui-lib/src/components/date-picker/DatePicker.js
index c4bd9532596..1c1532a5d0c 100644
--- a/packages/dnb-ui-lib/src/components/date-picker/DatePicker.js
+++ b/packages/dnb-ui-lib/src/components/date-picker/DatePicker.js
@@ -6,7 +6,7 @@
 import React, { PureComponent } from 'react'
 import PropTypes from 'prop-types'
 import classnames from 'classnames'
-
+import AlignmentHelper from '../../shared/AlignmentHelper'
 import {
   isTrue,
   makeUniqueId,
@@ -425,8 +425,8 @@ export default class DatePicker extends PureComponent {
     )
     if (
       hidePicker &&
-      (!isTrue(this.props.show_submit_button) &&
-        !isTrue(this.props.show_cancel_button))
+      !isTrue(this.props.show_submit_button) &&
+      !isTrue(this.props.show_cancel_button)
     ) {
       this.hidePicker(args)
     }
@@ -719,9 +719,7 @@ export default class DatePicker extends PureComponent {
           />
         )}
 
-        <span className="dnb-date-picker__helper" aria-hidden>
-          &zwnj;
-        </span>
+        <AlignmentHelper className="dnb-date-picker__helper" />
 
         <span
           className="dnb-date-picker__inner"
diff --git a/packages/dnb-ui-lib/src/components/date-picker/style/_date-picker.scss b/packages/dnb-ui-lib/src/components/date-picker/style/_date-picker.scss
index 80164076ee7..45d6ddf3d06 100644
--- a/packages/dnb-ui-lib/src/components/date-picker/style/_date-picker.scss
+++ b/packages/dnb-ui-lib/src/components/date-picker/style/_date-picker.scss
@@ -48,12 +48,8 @@
 
   // if no label is provided, then make sure we have some text to align the button
   &__helper {
-    @include helper();
     line-height: var(--date-picker-input-height);
   }
-  &--vertical &__helper {
-    @include helperVertical();
-  }
 
   &__shell {
     position: relative;
diff --git a/packages/dnb-ui-lib/src/components/dropdown/Dropdown.js b/packages/dnb-ui-lib/src/components/dropdown/Dropdown.js
index 6af5380e2dc..f8d314ac984 100644
--- a/packages/dnb-ui-lib/src/components/dropdown/Dropdown.js
+++ b/packages/dnb-ui-lib/src/components/dropdown/Dropdown.js
@@ -7,6 +7,7 @@ import React, { PureComponent } from 'react'
 import PropTypes from 'prop-types'
 import classnames from 'classnames'
 import keycode from 'keycode'
+import AlignmentHelper from '../../shared/AlignmentHelper'
 import {
   isTrue,
   makeUniqueId,
@@ -799,7 +800,10 @@ export default class Dropdown extends PureComponent {
       }, {})
       const counts = Object.keys(itemSpots)
       const findClosest = (arr, val) =>
-        Math.max.apply(null, arr.filter(v => v <= val))
+        Math.max.apply(
+          null,
+          arr.filter(v => v <= val)
+        )
       let closestToTop = null,
         closestToBottom = null,
         tmpToTop,
@@ -1066,9 +1070,7 @@ export default class Dropdown extends PureComponent {
           />
         )}
 
-        <span className="dnb-dropdown__helper" aria-hidden>
-          &zwnj;
-        </span>
+        <AlignmentHelper className="dnb-dropdown__helper" />
 
         <span className="dnb-dropdown__inner" ref={this._ref}>
           {showStatus && (
diff --git a/packages/dnb-ui-lib/src/components/dropdown/style/_dropdown.scss b/packages/dnb-ui-lib/src/components/dropdown/style/_dropdown.scss
index 944e28679f8..bb959184067 100644
--- a/packages/dnb-ui-lib/src/components/dropdown/style/_dropdown.scss
+++ b/packages/dnb-ui-lib/src/components/dropdown/style/_dropdown.scss
@@ -60,14 +60,6 @@
     color: inherit;
   }
 
-  // if no label is provided, then make sure we have some text to align the button
-  &__helper {
-    @include helper();
-  }
-  &--vertical &__helper {
-    @include helperVertical();
-  }
-
   &__shell {
     position: relative;
 
diff --git a/packages/dnb-ui-lib/src/components/form-label/FormLabel.js b/packages/dnb-ui-lib/src/components/form-label/FormLabel.js
index 6abe1edbe5a..bb1b30e8a55 100644
--- a/packages/dnb-ui-lib/src/components/form-label/FormLabel.js
+++ b/packages/dnb-ui-lib/src/components/form-label/FormLabel.js
@@ -6,6 +6,7 @@
 import React, { PureComponent } from 'react'
 import PropTypes from 'prop-types'
 import classnames from 'classnames'
+import AlignmentHelper from '../../shared/AlignmentHelper'
 import {
   extendPropsWithContext,
   isTrue,
@@ -142,7 +143,7 @@ export default class FormLabel extends PureComponent {
     if (isTrue(sr_only)) {
       return (
         <Element is={element} aria-label={content} {...params}>
-          <span aria-hidden>&zwnj;</span>
+          <AlignmentHelper className="dnb-form-label__helper" />
         </Element>
       )
     }
diff --git a/packages/dnb-ui-lib/src/components/form-row/FormRow.js b/packages/dnb-ui-lib/src/components/form-row/FormRow.js
index f86ceae1477..2f26c0f9fc3 100644
--- a/packages/dnb-ui-lib/src/components/form-row/FormRow.js
+++ b/packages/dnb-ui-lib/src/components/form-row/FormRow.js
@@ -6,6 +6,7 @@
 import React, { PureComponent } from 'react'
 import PropTypes from 'prop-types'
 import classnames from 'classnames'
+import AlignmentHelper from '../../shared/AlignmentHelper'
 import {
   extend,
   extendPropsWithContext,
@@ -241,9 +242,7 @@ export default class FormRow extends PureComponent {
       <Context.Provider value={context}>
         <Fieldset useFieldset={useFieldset}>
           <div {...params}>
-            <span className="dnb-form-row__helper" aria-hidden>
-              &zwnj;
-            </span>
+            <AlignmentHelper className="dnb-form-row__helper" />
 
             {label && (
               <FormLabel
diff --git a/packages/dnb-ui-lib/src/components/form-row/style/_form-row.scss b/packages/dnb-ui-lib/src/components/form-row/style/_form-row.scss
index 929930468a2..3390b591f78 100644
--- a/packages/dnb-ui-lib/src/components/form-row/style/_form-row.scss
+++ b/packages/dnb-ui-lib/src/components/form-row/style/_form-row.scss
@@ -21,13 +21,6 @@
     width: 100%; // to help #input stretch
   }
 
-  &__helper {
-    @include helper();
-  }
-  &--vertical &__helper {
-    @include helperVertical();
-  }
-
   // for hoizontal direction
   &:not(#{&}--vertical) {
     & > .dnb-form-row__content {
diff --git a/packages/dnb-ui-lib/src/components/icon/style/_icon.scss b/packages/dnb-ui-lib/src/components/icon/style/_icon.scss
index 0cc14e8e2ee..4947058c936 100644
--- a/packages/dnb-ui-lib/src/components/icon/style/_icon.scss
+++ b/packages/dnb-ui-lib/src/components/icon/style/_icon.scss
@@ -83,8 +83,6 @@
     justify-content: center;
   }
 
-  p &,
-  blockquote &,
   h1 &,
   h2 &,
   h3 &,
diff --git a/packages/dnb-ui-lib/src/components/input/Input.js b/packages/dnb-ui-lib/src/components/input/Input.js
index 8e282bfdd7c..443125bc71f 100644
--- a/packages/dnb-ui-lib/src/components/input/Input.js
+++ b/packages/dnb-ui-lib/src/components/input/Input.js
@@ -6,6 +6,7 @@
 import React, { PureComponent } from 'react'
 import PropTypes from 'prop-types'
 import classnames from 'classnames'
+import AlignmentHelper from '../../shared/AlignmentHelper'
 import Button from '../button/Button'
 import FormLabel from '../form-label/FormLabel'
 import FormStatus from '../form-status/FormStatus'
@@ -382,7 +383,7 @@ export default class Input extends PureComponent {
     }
 
     // we may considder using: aria-details
-    if (showStatus || (suffix || description)) {
+    if (showStatus || suffix || description) {
       inputParams['aria-describedby'] = `${
         showStatus ? id + '-status' : ''
       } ${suffix || description ? id + '-description' : ''}`
@@ -428,9 +429,7 @@ export default class Input extends PureComponent {
           />
         )}
 
-        <span className="dnb-input__helper" aria-hidden>
-          &zwnj;
-        </span>
+        <AlignmentHelper className="dnb-input__helper" />
 
         <span {...innerParams}>
           {showStatus && (
diff --git a/packages/dnb-ui-lib/src/components/input/style/_input.scss b/packages/dnb-ui-lib/src/components/input/style/_input.scss
index 8f5aea806a9..3cbe7749845 100644
--- a/packages/dnb-ui-lib/src/components/input/style/_input.scss
+++ b/packages/dnb-ui-lib/src/components/input/style/_input.scss
@@ -26,14 +26,6 @@
   font-size: var(--input-font-small);
   line-height: var(--input-height);
 
-  // if no label is provided, then make sure we have some text to align the button
-  &__helper {
-    @include helper();
-  }
-  &--vertical &__helper {
-    @include helperVertical();
-  }
-
   &__inner {
     display: inline-flex;
     flex-direction: column;
diff --git a/packages/dnb-ui-lib/src/components/radio/Radio.js b/packages/dnb-ui-lib/src/components/radio/Radio.js
index 9c0318b51a7..8e16da6180b 100644
--- a/packages/dnb-ui-lib/src/components/radio/Radio.js
+++ b/packages/dnb-ui-lib/src/components/radio/Radio.js
@@ -7,6 +7,7 @@ import React, { Component } from 'react'
 import PropTypes from 'prop-types'
 import classnames from 'classnames'
 import keycode from 'keycode'
+import AlignmentHelper from '../../shared/AlignmentHelper'
 import {
   isTrue,
   makeUniqueId,
@@ -360,9 +361,7 @@ export default class Radio extends Component {
                   />
                 )}
 
-                <span className="dnb-radio__helper" aria-hidden>
-                  &zwnj;
-                </span>
+                <AlignmentHelper className="dnb-radio__helper" />
 
                 <span className="dnb-radio__inner">
                   {label_position === 'left' && statusComp}
diff --git a/packages/dnb-ui-lib/src/components/radio/RadioGroup.js b/packages/dnb-ui-lib/src/components/radio/RadioGroup.js
index 19c2a49ce00..8f73f3e96d1 100644
--- a/packages/dnb-ui-lib/src/components/radio/RadioGroup.js
+++ b/packages/dnb-ui-lib/src/components/radio/RadioGroup.js
@@ -6,6 +6,7 @@
 import React, { PureComponent } from 'react'
 import PropTypes from 'prop-types'
 import classnames from 'classnames'
+import AlignmentHelper from '../../shared/AlignmentHelper'
 import {
   extendPropsWithContext,
   makeUniqueId,
@@ -230,11 +231,7 @@ export default class RadioGroup extends PureComponent {
     return (
       <RadioGroupContext.Provider value={context}>
         <div className={classes}>
-          {!label && (
-            <span className="dnb-radio-group__helper" aria-hidden>
-              &zwnj;
-            </span>
-          )}
+          <AlignmentHelper className="dnb-radio-group__helper" />
           <FormRow {...formRowParams}>
             <span
               id={id}
diff --git a/packages/dnb-ui-lib/src/components/radio/style/_radio.scss b/packages/dnb-ui-lib/src/components/radio/style/_radio.scss
index dea21c6acad..575d41e640a 100644
--- a/packages/dnb-ui-lib/src/components/radio/style/_radio.scss
+++ b/packages/dnb-ui-lib/src/components/radio/style/_radio.scss
@@ -23,12 +23,6 @@
     flex-direction: column;
     align-self: center;
   }
-  &__helper {
-    @include helper();
-
-    // since we don't have a vertical state, we set it to vertical by default
-    @include helperVertical();
-  }
 
   &__shell {
     position: relative;
@@ -181,13 +175,11 @@
       // because of our bottom margins we have on the componens
       margin-bottom: calc(1px - 1px - var(--radio-margin-bottom));
     }
-    .dnb-form-row--vertical & {
-      display: flex;
-    }
 
     // if no label is given
     &__helper {
-      @include helper();
+      font-size: var(--font-size-basis);
+      line-height: var(--radio-height);
     }
   }
 
diff --git a/packages/dnb-ui-lib/src/components/slider/Slider.js b/packages/dnb-ui-lib/src/components/slider/Slider.js
index 45c75daf127..01efc796fa9 100644
--- a/packages/dnb-ui-lib/src/components/slider/Slider.js
+++ b/packages/dnb-ui-lib/src/components/slider/Slider.js
@@ -8,6 +8,7 @@ import PropTypes from 'prop-types'
 import classnames from 'classnames'
 import keycode from 'keycode'
 import Context from '../../shared/Context'
+import AlignmentHelper from '../../shared/AlignmentHelper'
 import {
   isTrue,
   makeUniqueId,
@@ -621,9 +622,7 @@ export default class Slider extends PureComponent {
           />
         )}
 
-        <span className="dnb-slider__helper" aria-hidden>
-          &zwnj;
-        </span>
+        <AlignmentHelper className="dnb-slider__helper" />
 
         <span className="dnb-slider__wrapper">
           {showStatus && (
diff --git a/packages/dnb-ui-lib/src/components/slider/style/_slider.scss b/packages/dnb-ui-lib/src/components/slider/style/_slider.scss
index 48a7470aa52..fb767dc7b67 100644
--- a/packages/dnb-ui-lib/src/components/slider/style/_slider.scss
+++ b/packages/dnb-ui-lib/src/components/slider/style/_slider.scss
@@ -20,14 +20,6 @@
   font-size: var(--font-size-small);
   line-height: var(--line-height-basis);
 
-  &__helper {
-    // NB: this is not the same kind of helper than we have for the button!
-    @include helper();
-  }
-  &__label--vertical &__helper {
-    @include helperVertical();
-  }
-
   &--vertical {
     display: flex;
     width: auto;
diff --git a/packages/dnb-ui-lib/src/components/switch/Switch.js b/packages/dnb-ui-lib/src/components/switch/Switch.js
index be07d2d7d47..1d22b7884a1 100644
--- a/packages/dnb-ui-lib/src/components/switch/Switch.js
+++ b/packages/dnb-ui-lib/src/components/switch/Switch.js
@@ -8,6 +8,7 @@ import PropTypes from 'prop-types'
 import classnames from 'classnames'
 import keycode from 'keycode'
 import Context from '../../shared/Context'
+import AlignmentHelper from '../../shared/AlignmentHelper'
 import {
   isTrue,
   makeUniqueId,
@@ -277,28 +278,30 @@ export default class Switch extends Component {
         animation={status_animation}
       />
     )
+    const labelComp = label && (
+      <FormLabel
+        id={id + '-label'}
+        for_id={id}
+        text={label}
+        disabled={disabled}
+        sr_only={label_sr_only}
+      />
+    )
 
     return (
       <span {...mainParams}>
         <span className="dnb-switch__order">
-          <span className="dnb-switch__helper2" aria-hidden>
-            &zwnj;
-          </span>
+          <AlignmentHelper className="dnb-switch__helper" />
 
-          {label && (
-            <FormLabel
-              id={id + '-label'}
-              for_id={id}
-              text={label}
-              disabled={disabled}
-              sr_only={label_sr_only}
-            />
-          )}
+          {label_position === 'left' && labelComp}
 
           <span className="dnb-switch__inner">
-            {label_position === 'left' && statusComp}
+            {statusComp}
 
             <span className="dnb-switch__shell">
+              {(label_position === 'right' || !label_position) &&
+                labelComp}
+
               <input
                 id={id}
                 name={id}
@@ -328,7 +331,6 @@ export default class Switch extends Component {
             </span>
           </span>
         </span>
-        {(label_position === 'right' || !label_position) && statusComp}
       </span>
     )
   }
diff --git a/packages/dnb-ui-lib/src/components/switch/style/_switch.scss b/packages/dnb-ui-lib/src/components/switch/style/_switch.scss
index 7625ca63f16..caf36904e82 100644
--- a/packages/dnb-ui-lib/src/components/switch/style/_switch.scss
+++ b/packages/dnb-ui-lib/src/components/switch/style/_switch.scss
@@ -23,10 +23,7 @@
   }
 
   &__helper {
-    @include helper();
-
-    // since we don't have a vertical state, we set it to vertical by default
-    @include helperVertical();
+    font-size: var(--font-size-basis);
   }
 
   &__shell {
@@ -36,6 +33,11 @@
 
     display: flex;
     align-items: center;
+
+    height: var(--switch-height);
+
+    // vertical alignment
+    // transform: translateY(-0.125rem);
   }
 
   &__focus,
@@ -136,10 +138,6 @@
 
   &__order {
     display: inline-flex;
-
-    // is needed for vertical alignment of the whole component
-    // font-size: var(--font-size-small);
-    // line-height: var(--line-height-basis);
   }
 
   &--label-position-left &__order {
@@ -164,12 +162,9 @@
       order: 2;
       margin-left: 1rem;
     }
-    & + .dnb-form-status {
+    .dnb-form-status {
       order: 3;
       margin-top: 0.5rem;
-
-      // in case the status did not wrap, we want to have the status on the same line
-      vertical-align: bottom;
     }
   }
 
diff --git a/packages/dnb-ui-lib/src/components/textarea/Textarea.js b/packages/dnb-ui-lib/src/components/textarea/Textarea.js
index 92da80a172f..c46cfd61467 100644
--- a/packages/dnb-ui-lib/src/components/textarea/Textarea.js
+++ b/packages/dnb-ui-lib/src/components/textarea/Textarea.js
@@ -8,6 +8,7 @@ import PropTypes from 'prop-types'
 import classnames from 'classnames'
 import FormLabel from '../form-label/FormLabel'
 import FormStatus from '../form-status/FormStatus'
+import AlignmentHelper from '../../shared/AlignmentHelper'
 import {
   isTrue,
   makeUniqueId,
@@ -343,9 +344,7 @@ export default class Textarea extends PureComponent {
           />
         )}
 
-        <span className="dnb-textarea__helper" aria-hidden>
-          &zwnj;
-        </span>
+        <AlignmentHelper className="dnb-textarea__helper" />
 
         <span {...innerParams}>
           {showStatus && (
diff --git a/packages/dnb-ui-lib/src/components/textarea/style/_textarea.scss b/packages/dnb-ui-lib/src/components/textarea/style/_textarea.scss
index 8f427da65b9..a7aded32cfa 100644
--- a/packages/dnb-ui-lib/src/components/textarea/style/_textarea.scss
+++ b/packages/dnb-ui-lib/src/components/textarea/style/_textarea.scss
@@ -16,6 +16,9 @@
   margin: 0;
   padding: 0 var(--textarea-padding-width);
 
+  font-size: var(--font-size-basis);
+  line-height: var(--line-height-basis);
+
   // Before v4.15 we had
   // padding-top: calc(
   //   var(--textarea-padding-width) - var(--textarea-vertical-correction)
@@ -31,12 +34,8 @@
   @supports (-ms-ime-align: auto) {
     padding: var(--textarea-padding-width);
   }
-
-  line-height: var(--line-height-basis);
 }
 @mixin textareaStyle() {
-  font-size: var(--font-size-basis);
-
   border: none;
   border-radius: 1px;
 
@@ -49,7 +48,9 @@
 
 .dnb-textarea {
   display: inline-flex;
-  align-items: baseline;
+
+  font-size: var(--font-size-small);
+  line-height: var(--line-height-basis);
 
   &__inner {
     display: inline-flex;
@@ -58,16 +59,12 @@
     margin: var(--textarea-padding-width);
   }
 
-  &__helper {
-    @include helper();
-  }
-  &--vertical &__helper {
-    @include helperVertical();
-  }
-
   &__shell {
     display: inline-flex;
     position: relative;
+
+    // because of inheritance, we set the font-size and line-height here as well
+    font-size: var(--font-size-basis);
   }
 
   &__placeholder {
@@ -110,12 +107,8 @@
     margin: 1rem 0 0 calc(1px - 1px - var(--textarea-padding-width));
   }
 
-  &[class*='__status'] {
-    align-items: flex-start;
-    > .dnb-form-label {
-      // vertical align the current font
-      margin-top: 0.25rem;
-    }
+  &:not(#{&}--vertical) .dnb-form-label {
+    margin-top: 0.5rem;
   }
 
   &--vertical {
@@ -124,6 +117,14 @@
     align-items: flex-start;
   }
 
+  &[class*='__status'] {
+    align-items: flex-start;
+    > .dnb-form-label {
+      // vertical align the current font
+      margin-top: 0.25rem;
+    }
+  }
+
   // make the input full width
   &--stretch {
     display: flex;
diff --git a/packages/dnb-ui-lib/src/components/toggle-button/ToggleButton.js b/packages/dnb-ui-lib/src/components/toggle-button/ToggleButton.js
index b6276249ab8..9b3c70e5a17 100644
--- a/packages/dnb-ui-lib/src/components/toggle-button/ToggleButton.js
+++ b/packages/dnb-ui-lib/src/components/toggle-button/ToggleButton.js
@@ -7,6 +7,7 @@ import React, { Component } from 'react'
 import PropTypes from 'prop-types'
 import classnames from 'classnames'
 import keycode from 'keycode'
+import AlignmentHelper from '../../shared/AlignmentHelper'
 import {
   isTrue,
   makeUniqueId,
@@ -413,9 +414,7 @@ export default class ToggleButton extends Component {
                 )}
 
                 <span className="dnb-toggle-button__shell">
-                  <span className="dnb-toggle-button__helper" aria-hidden>
-                    &zwnj;
-                  </span>
+                  <AlignmentHelper className="dnb-toggle-button__helper" />
 
                   <Button
                     variant="secondary"
diff --git a/packages/dnb-ui-lib/src/components/toggle-button/ToggleButtonGroup.js b/packages/dnb-ui-lib/src/components/toggle-button/ToggleButtonGroup.js
index 83d35e01c81..22672ef6b76 100644
--- a/packages/dnb-ui-lib/src/components/toggle-button/ToggleButtonGroup.js
+++ b/packages/dnb-ui-lib/src/components/toggle-button/ToggleButtonGroup.js
@@ -6,6 +6,7 @@
 import React, { PureComponent } from 'react'
 import PropTypes from 'prop-types'
 import classnames from 'classnames'
+import AlignmentHelper from '../../shared/AlignmentHelper'
 import {
   isTrue,
   makeUniqueId,
@@ -290,9 +291,7 @@ export default class ToggleButtonGroup extends PureComponent {
       <ToggleButtonGroupContext.Provider value={context}>
         <div className={classes}>
           {!label && (
-            <span className="dnb-toggle-button-group__helper" aria-hidden>
-              &zwnj;
-            </span>
+            <AlignmentHelper className="dnb-toggle-button-group__helper" />
           )}
           <FormRow {...formRowParams}>
             <span
diff --git a/packages/dnb-ui-lib/src/components/toggle-button/style/_toggle-button.scss b/packages/dnb-ui-lib/src/components/toggle-button/style/_toggle-button.scss
index e27736dab96..d818d5df15b 100644
--- a/packages/dnb-ui-lib/src/components/toggle-button/style/_toggle-button.scss
+++ b/packages/dnb-ui-lib/src/components/toggle-button/style/_toggle-button.scss
@@ -12,7 +12,8 @@
   display: inline-flex;
   align-items: center; // because, with this we v align it to the label
 
-  font-size: var(--font-size-basis);
+  font-size: var(--font-size-small);
+  line-height: var(--line-height-basis);
 
   &__inner {
     display: inline-flex;
@@ -27,12 +28,6 @@
     -webkit-user-select: none; // Safari / Touch fix
   }
 
-  &__helper {
-    @include helper();
-  }
-  &--vertical &__helper {
-    @include helperVertical();
-  }
   &--vertical {
     flex-direction: column;
     align-items: flex-start;
@@ -142,8 +137,6 @@
   &-group {
     display: inline-flex;
 
-    font-size: var(--font-size-basis);
-
     // default spacing
     .dnb-toggle-button {
       margin-right: var(--toggle-button-margin-right);
@@ -168,18 +161,18 @@
     }
 
     .dnb-form-row {
-      align-items: baseline;
-
       margin-bottom: calc(1px - 1px - var(--toggle-button-margin-bottom));
     }
-    .dnb-form-row--vertical & {
-      display: flex;
+
+    // vertical alignment
+    .dnb-form-row__helper {
+      font-size: 1.375rem; /* 22/16 */
     }
 
     // if no label is given
     &__helper {
-      @include helper();
-      line-height: 2.5rem;
+      font-size: var(--font-size-basis);
+      line-height: var(--button-height);
     }
   }
 
diff --git a/packages/dnb-ui-lib/src/shared/AlignmentHelper.js b/packages/dnb-ui-lib/src/shared/AlignmentHelper.js
new file mode 100644
index 00000000000..7cc3c1be8be
--- /dev/null
+++ b/packages/dnb-ui-lib/src/shared/AlignmentHelper.js
@@ -0,0 +1,34 @@
+/**
+ * Spacing helper
+ *
+ */
+
+import React from 'react'
+import PropTypes from 'prop-types'
+import classnames from 'classnames'
+
+// We use the w tag so NVDA not our after with content: '\00A0' as blank
+export default function AlignmentHelper({
+  className,
+  children,
+  ...props
+}) {
+  return (
+    <span
+      className={classnames('dnb-alignment-helper', className)}
+      aria-hidden
+      {...props}
+    >
+      {children}
+    </span>
+  )
+}
+
+AlignmentHelper.propTypes = {
+  children: PropTypes.node,
+  className: PropTypes.string
+}
+AlignmentHelper.defaultProps = {
+  children: null,
+  className: null
+}
diff --git a/packages/dnb-ui-lib/src/style/core/helper-classes.scss b/packages/dnb-ui-lib/src/style/core/helper-classes.scss
index fa6ac234fea..98f45ad69dd 100644
--- a/packages/dnb-ui-lib/src/style/core/helper-classes.scss
+++ b/packages/dnb-ui-lib/src/style/core/helper-classes.scss
@@ -73,6 +73,9 @@
     }
   }
 }
+.dnb-alignment-helper {
+  @include helper();
+}
 .dnb-sr-only {
   @include srOnly();
 }
diff --git a/packages/dnb-ui-lib/src/style/core/utilities.scss b/packages/dnb-ui-lib/src/style/core/utilities.scss
index 6e11d04dd7a..ed0a7922615 100644
--- a/packages/dnb-ui-lib/src/style/core/utilities.scss
+++ b/packages/dnb-ui-lib/src/style/core/utilities.scss
@@ -168,14 +168,26 @@ $breakpoints: (
 // Vertical alignment helper
 @mixin helper() {
   display: inline-block;
-  clip: rect(0, 0, 0, 0);
+
   width: 1px;
-  margin-left: -1px;
-  overflow: hidden;
-}
-@mixin helperVertical() {
   height: 1px;
+
   margin-top: -1px;
+  margin-left: -1px;
+
+  overflow: hidden;
+  clip: rect(0, 0, 0, 0);
+
+  font-size: var(--font-size-small);
+
+  // Add a char to align the component
+  &::after {
+    content: '\00A0'; // No-Break Space
+    width: 0;
+  }
+  // &:focus::after {
+  //   content: none;
+  // }
 }
 
 // Screen reader only helper
diff --git a/packages/dnb-ui-lib/stories/components/FormRow.js b/packages/dnb-ui-lib/stories/components/FormRow.js
index 41329c764d5..da81af4f499 100644
--- a/packages/dnb-ui-lib/stories/components/FormRow.js
+++ b/packages/dnb-ui-lib/stories/components/FormRow.js
@@ -48,7 +48,7 @@ export default [
           <FormRow
             // indent
             // indent_offset="large"
-            label="Horizontal Legend Aptent maecenas non pharetra libero massa auctor pretium vulputate vivamus:"
+            label="Horizontal Legend Aptent:"
             direction="horizontal"
           >
             <AllComponents showText horizontal />
@@ -56,30 +56,32 @@ export default [
         </Box>
 
         <Box>
-          <H3 bottom="large">Vertical direction</H3>
-          <FormRow label="Vertical direction:" direction="vertical">
-            <AllComponents showText />
+          <H3 bottom="large">Horizontal with vertical label direction</H3>
+          <FormRow label="Vertical Legend:" label_direction="vertical">
+            <AllComponents showText horizontal />
           </FormRow>
         </Box>
 
         <Box>
-          <H3 bottom="large">Vertical everything</H3>
-          <FormRow label="Vertical everything:" vertical="true">
-            <AllComponents showText />
+          <H3 bottom="large">
+            Horizontal with vertical label direction, but no label
+          </H3>
+          <FormRow label="Vertical Legend:" label_direction="vertical">
+            <AllComponents showText horizontal hideLabel />
           </FormRow>
         </Box>
 
         <Box>
-          <H3 bottom="large">Vertical label direction</H3>
-          <FormRow label="Vertical Legend:" label_direction="vertical">
-            <AllComponents showText horizontal />
+          <H3 bottom="large">Vertical direction</H3>
+          <FormRow label="Vertical direction:" direction="vertical">
+            <AllComponents showText />
           </FormRow>
         </Box>
 
         <Box>
-          <H3 bottom="large">Vertical label direction, but no label</H3>
-          <FormRow label="Vertical Legend:" label_direction="vertical">
-            <AllComponents showText horizontal hideLabel />
+          <H3 bottom="large">Vertical everything</H3>
+          <FormRow label="Vertical everything:" vertical="true">
+            <AllComponents showText />
           </FormRow>
         </Box>