diff --git a/app/client/cypress/e2e/Regression/ClientSide/Widgets/ListV2/Listv2_dataIdentifierProperty_spec.js b/app/client/cypress/e2e/Regression/ClientSide/Widgets/ListV2/Listv2_dataIdentifierProperty_spec.js
index baa74e1c0a..00e63fe6ef 100644
--- a/app/client/cypress/e2e/Regression/ClientSide/Widgets/ListV2/Listv2_dataIdentifierProperty_spec.js
+++ b/app/client/cypress/e2e/Regression/ClientSide/Widgets/ListV2/Listv2_dataIdentifierProperty_spec.js
@@ -71,7 +71,7 @@ describe("List v2 - Data Identifier property", () => {
     cy.wait(250);
 
     // check if all the keys are present
-    cy.get(".rc-select-item-option-content > span")
+    cy.get(".rc-select-item-option-content > div > span")
       .should("have.length", 3)
       .then(($el) => {
         // we get a list of jQuery elements
diff --git a/app/client/src/components/propertyControls/DropDownControl.tsx b/app/client/src/components/propertyControls/DropDownControl.tsx
index e64117eedd..701bf82040 100644
--- a/app/client/src/components/propertyControls/DropDownControl.tsx
+++ b/app/client/src/components/propertyControls/DropDownControl.tsx
@@ -117,34 +117,36 @@ class DropDownControl extends BaseControl<DropDownControlProps> {
               label={option.label}
               value={option.value}
             >
-              {/* Show Flag if present */}
-              {option.leftElement && (
-                <FlagWrapper>{option.leftElement}</FlagWrapper>
-              )}
+              <div className="flex flex-row w-full">
+                {/* Show Flag if present */}
+                {option.leftElement && (
+                  <FlagWrapper>{option.leftElement}</FlagWrapper>
+                )}
 
-              {/* Show icon if present */}
-              {option.icon && (
-                <Icon className="mr-1" name={option.icon} size="md" />
-              )}
+                {/* Show icon if present */}
+                {option.icon && (
+                  <Icon className="mr-1" name={option.icon} size="md" />
+                )}
 
-              {option.subText ? (
-                this.props.hideSubText ? (
-                  // Show subText below the main text eg - DatePicker control
-                  <div className="w-full flex flex-col">
-                    <Text kind="action-m">{option.label}</Text>
-                    <Text kind="action-s">{option.subText}</Text>
-                  </div>
+                {option.subText ? (
+                  this.props.hideSubText ? (
+                    // Show subText below the main text eg - DatePicker control
+                    <div className="w-full flex flex-col">
+                      <Text kind="action-m">{option.label}</Text>
+                      <Text kind="action-s">{option.subText}</Text>
+                    </div>
+                  ) : (
+                    // Show subText to the right side eg - Label fontsize control
+                    <div className="w-full flex justify-between items-end">
+                      <Text kind="action-m">{option.label}</Text>
+                      <Text kind="action-s">{option.subText}</Text>
+                    </div>
+                  )
                 ) : (
-                  // Show subText to the right side eg - Label fontsize control
-                  <div className="w-full flex justify-between items-end">
-                    <Text kind="action-m">{option.label}</Text>
-                    <Text kind="action-s">{option.subText}</Text>
-                  </div>
-                )
-              ) : (
-                // Only show the label eg - Auto height control
-                <Text kind="action-m">{option.label}</Text>
-              )}
+                  // Only show the label eg - Auto height control
+                  <Text kind="action-m">{option.label}</Text>
+                )}
+              </div>
             </Option>
           ))}
         </Select>