Make required asterix align after text

src/components/FormRow.js

@@ -10,6 +10,7 @@ import Input from './Input';
 import Label from './Label';
 import RadioInput from './RadioInput';
 import Row from './Row';
+import Required from './Required';
 import StaticInput from './StaticInput';
 
 const typeTranslations = {
@@ -69,7 +70,7 @@ const FormRow = (props) => {
       {label && (
         <Label for={id} sm={labelWidth} size={size} className={labelAlignment}>
           {label}
-          {required && label ? <span className="text-danger">&nbsp;*</span> : null}
+          {required && label ? <Required /> : null}
         </Label>
       )}
       <Col sm={inputContainerWidth}>

src/components/Required.js

@@ -0,0 +1,7 @@
+import React from 'react';
+
+const Required = () => (
+  <span className="text-danger pl-1" style={{ position: 'absolute' }}>*</span>
+);
+
+export default Required;

test/components/FormRow.spec.js

@@ -80,10 +80,9 @@ describe('<FormRow />', () => {
 
     it('should show a star', () => {
       const label = component.find(Label);
-      const star = label.find('span');
+      const star = label.find('Required');
 
-      assert.equal(star.hasClass('text-danger'), true);
-      assert.equal(star.text(), ' *');
+      assert.equal(star.length, 1);
     });
   });