diff --git a/cypress/e2e/markdown_widget_code_block_spec.js b/cypress/e2e/markdown_widget_code_block_spec.js
index cc9f0dc0..1b835f67 100644
--- a/cypress/e2e/markdown_widget_code_block_spec.js
+++ b/cypress/e2e/markdown_widget_code_block_spec.js
@@ -77,7 +77,7 @@ function codeBlock(content) {
     <div>
       <div></div>
       <div>
-        <div><label>Code Block </label>
+        <div><label>Code Block</label>
           <div><button><span><svg>
                   <path></path>
                 </svg></span></button>
diff --git a/packages/decap-cms-core/src/components/Editor/EditorControlPane/EditorControl.js b/packages/decap-cms-core/src/components/Editor/EditorControlPane/EditorControl.js
index 71600750..d1191513 100644
--- a/packages/decap-cms-core/src/components/Editor/EditorControlPane/EditorControl.js
+++ b/packages/decap-cms-core/src/components/Editor/EditorControlPane/EditorControl.js
@@ -102,7 +102,14 @@ function LabelComponent({ field, isActive, hasErrors, uniqueFieldId, isFieldOpti
   const label = `${field.get('label', field.get('name'))}`;
   const labelComponent = (
     <FieldLabel isActive={isActive} hasErrors={hasErrors} htmlFor={uniqueFieldId}>
-      {label} {`${isFieldOptional ? ` (${t('editor.editorControl.field.optional')})` : ''}`}
+      {isFieldOptional ? (
+        <>
+          {label}
+          <span>{` (${t('editor.editorControl.field.optional')})`}</span>
+        </>
+      ) : (
+        label
+      )}
     </FieldLabel>
   );