fix: updated with review comments.

Author: dlabaj

packages/module/src/Severity/Severity.tsx

@@ -1,4 +1,5 @@
 import React, { useMemo } from 'react';
+import { createUseStyles } from 'react-jss'
 import {
   SeverityCriticalIcon,
   SeverityImportantIcon,
@@ -7,7 +8,13 @@ import {
   SeverityNoneIcon,
   SeverityUndefinedIcon
 } from '@patternfly/react-icons';
+import { Flex, FlexItem } from '@patternfly/react-core';
 
+const useStyles = createUseStyles({
+  severity: {
+    
+  }
+});
 const severityLevels = (severity: SeverityType) => {
   switch (severity) {
   case 'critical':
@@ -64,11 +71,17 @@ export const Severity: React.FunctionComponent<SeverityProps> = ({
 
   return (
     <React.Fragment>
-      {/* eslint-disable-next-line react/no-unknown-property */}
-      <i {...title} {...props} widget-type="Severity" widget-id={label} data-ouia-component-id={ouiaId}>
-        {severityVariant}
-      </i>
-      {!labelHidden && label}
+      <Flex spaceItems={{ default: 'spaceItemsSm' }}>
+        <FlexItem>
+          {/* eslint-disable-next-line react/no-unknown-property */}
+          <span  {...title} {...props} widget-type="Severity" widget-id={label} data-ouia-component-id={ouiaId}>
+            {severityVariant}
+          </span>
+        </FlexItem>
+        <FlexItem>
+          {!labelHidden && label}
+        </FlexItem>
+      </Flex>
     </React.Fragment>
   );
 };