diff --git a/src/components/side_panel/conditional_formatting/cf_preview_list/cf_preview_list.ts b/src/components/side_panel/conditional_formatting/cf_preview_list/cf_preview_list.ts
index 8c59b08766..30099f058f 100644
--- a/src/components/side_panel/conditional_formatting/cf_preview_list/cf_preview_list.ts
+++ b/src/components/side_panel/conditional_formatting/cf_preview_list/cf_preview_list.ts
@@ -36,17 +36,10 @@ css/* scss */ `
       }
       .o-cf-preview-icon {
         border: 1px solid lightgrey;
-        position: absolute;
         height: 50px;
         width: 50px;
       }
       .o-cf-preview-description {
-        left: 65px;
-        margin-bottom: auto;
-        margin-right: 8px;
-        margin-top: auto;
-        position: relative;
-        width: 142px;
         .o-cf-preview-description-rule {
           margin-bottom: 4px;
           font-weight: 600;
@@ -58,16 +51,11 @@ css/* scss */ `
           font-size: 12px;
         }
       }
-      .o-cf-delete {
-        left: 90%;
-        top: 39%;
-        position: absolute;
-      }
       &:not(:hover):not(.o-cf-dragging) .o-cf-drag-handle {
         display: none !important;
       }
       .o-cf-drag-handle {
-        left: -8px;
+        left: 2px;
         cursor: move;
         .o-icon {
           width: 6px;
diff --git a/src/components/side_panel/conditional_formatting/cf_preview_list/cf_preview_list.xml b/src/components/side_panel/conditional_formatting/cf_preview_list/cf_preview_list.xml
index 93b433607b..527cd190d1 100644
--- a/src/components/side_panel/conditional_formatting/cf_preview_list/cf_preview_list.xml
+++ b/src/components/side_panel/conditional_formatting/cf_preview_list/cf_preview_list.xml
@@ -14,46 +14,44 @@
 
   <t t-name="o-spreadsheet-ConditionalFormattingPanelPreview">
     <div
-      class="o-cf-preview d-flex position-relative"
+      class="o-cf-preview d-flex position-relative align-items-center"
       t-att-class="{ 'o-cf-dragging': dragAndDrop.draggedItemId === cf.id }"
       t-att-style="getPreviewDivStyle(cf)"
       t-att-data-id="cf.id"
       t-on-click="(ev) => props.onPreviewClick(cf)"
       t-on-mousedown="(ev) => this.onMouseDown(cf, ev)">
-      <div class="position-relative h-100 w-100 d-flex align-items-center">
-        <div class="o-cf-drag-handle h-100 position-absolute d-flex align-items-center text-muted">
-          <t t-call="o-spreadsheet-Icon.THIN_DRAG_HANDLE"/>
+      <div class="o-cf-drag-handle h-100 position-absolute d-flex align-items-center text-muted">
+        <t t-call="o-spreadsheet-Icon.THIN_DRAG_HANDLE"/>
+      </div>
+      <t t-if="cf.rule.type==='IconSetRule'">
+        <div class="o-cf-preview-icon d-flex justify-content-around align-items-center me-3">
+          <t t-call="o-spreadsheet-Icon.{{icons[cf.rule.icons.upper].template}}"/>
+          <t t-call="o-spreadsheet-Icon.{{icons[cf.rule.icons.middle].template}}"/>
+          <t t-call="o-spreadsheet-Icon.{{icons[cf.rule.icons.lower].template}}"/>
         </div>
-        <t t-if="cf.rule.type==='IconSetRule'">
-          <div class="o-cf-preview-icon d-flex justify-content-around align-items-center me-2">
-            <t t-call="o-spreadsheet-Icon.{{icons[cf.rule.icons.upper].template}}"/>
-            <t t-call="o-spreadsheet-Icon.{{icons[cf.rule.icons.middle].template}}"/>
-            <t t-call="o-spreadsheet-Icon.{{icons[cf.rule.icons.lower].template}}"/>
-          </div>
-        </t>
-        <t t-else="">
-          <div
-            t-att-style="getPreviewImageStyle(cf.rule)"
-            class="o-cf-preview-icon d-flex justify-content-around align-items-center me-2">
-            123
-          </div>
-        </t>
-        <div class="o-cf-preview-description">
-          <div class="o-cf-preview-ruletype">
-            <div class="o-cf-preview-description-rule text-truncate">
-              <t t-esc="getDescription(cf)"/>
-            </div>
-          </div>
-          <div class="o-cf-preview-range text-truncate" t-esc="cf.ranges"/>
+      </t>
+      <t t-else="">
+        <div
+          t-att-style="getPreviewImageStyle(cf.rule)"
+          class="o-cf-preview-icon d-flex justify-content-around align-items-center me-3 flex-shrink-0">
+          123
         </div>
-        <div class="o-cf-delete">
-          <div
-            class="o-cf-delete-button text-muted"
-            t-on-click.stop="(ev) => this.deleteConditionalFormat(cf, ev)"
-            title="Remove rule">
-            <t t-call="o-spreadsheet-Icon.TRASH"/>
+      </t>
+      <div class="o-cf-preview-description me-3 overflow-auto">
+        <div class="o-cf-preview-ruletype">
+          <div class="o-cf-preview-description-rule text-truncate">
+            <t t-esc="getDescription(cf)"/>
           </div>
         </div>
+        <div class="o-cf-preview-range text-truncate" t-esc="cf.ranges"/>
+      </div>
+      <div class="o-cf-delete ms-auto">
+        <div
+          class="o-cf-delete-button text-muted"
+          t-on-click.stop="(ev) => this.deleteConditionalFormat(cf, ev)"
+          title="Remove rule">
+          <t t-call="o-spreadsheet-Icon.TRASH"/>
+        </div>
       </div>
     </div>
   </t>
diff --git a/tests/conditional_formatting/__snapshots__/conditional_formatting_panel_component.test.ts.snap b/tests/conditional_formatting/__snapshots__/conditional_formatting_panel_component.test.ts.snap
index efcbc8a69e..14e5e2ba28 100644
--- a/tests/conditional_formatting/__snapshots__/conditional_formatting_panel_component.test.ts.snap
+++ b/tests/conditional_formatting/__snapshots__/conditional_formatting_panel_component.test.ts.snap
@@ -11,174 +11,166 @@ exports[`UI of conditional formats Conditional format list simple snapshot 1`] =
       class="o-cf-preview-list h-100 overflow-auto"
     >
       <div
-        class="o-cf-preview d-flex position-relative"
+        class="o-cf-preview d-flex position-relative align-items-center"
         data-id="1"
         style=""
       >
         <div
-          class="position-relative h-100 w-100 d-flex align-items-center"
+          class="o-cf-drag-handle h-100 position-absolute d-flex align-items-center text-muted"
         >
-          <div
-            class="o-cf-drag-handle h-100 position-absolute d-flex align-items-center text-muted"
-          >
-            <svg
-              class="o-icon"
-              fill="currentColor"
-              viewBox="0 0 4 16"
-              xmlns="http://www.w3.org/2000/svg"
-            >
-              <circle
-                cx="2"
-                cy="3.5"
-                r="1"
-              />
-              <circle
-                cx="2"
-                cy="6.5"
-                r="1"
-              />
-              <circle
-                cx="2"
-                cy="9.5"
-                r="1"
-              />
-              <circle
-                cx="2"
-                cy="12.5"
-                r="1"
-              />
-            </svg>
-          </div>
-          
-          <div
-            class="o-cf-preview-icon d-flex justify-content-around align-items-center me-2"
-            style="background:#FF0000; "
+          <svg
+            class="o-icon"
+            fill="currentColor"
+            viewBox="0 0 4 16"
+            xmlns="http://www.w3.org/2000/svg"
           >
-             123 
-          </div>
-          
+            <circle
+              cx="2"
+              cy="3.5"
+              r="1"
+            />
+            <circle
+              cx="2"
+              cy="6.5"
+              r="1"
+            />
+            <circle
+              cx="2"
+              cy="9.5"
+              r="1"
+            />
+            <circle
+              cx="2"
+              cy="12.5"
+              r="1"
+            />
+          </svg>
+        </div>
+        
+        <div
+          class="o-cf-preview-icon d-flex justify-content-around align-items-center me-3 flex-shrink-0"
+          style="background:#FF0000; "
+        >
+           123 
+        </div>
+        
+        <div
+          class="o-cf-preview-description me-3 overflow-auto"
+        >
           <div
-            class="o-cf-preview-description"
+            class="o-cf-preview-ruletype"
           >
             <div
-              class="o-cf-preview-ruletype"
-            >
-              <div
-                class="o-cf-preview-description-rule text-truncate"
-              >
-                Is equal to 2
-              </div>
-            </div>
-            <div
-              class="o-cf-preview-range text-truncate"
+              class="o-cf-preview-description-rule text-truncate"
             >
-              A1:A2
+              Is equal to 2
             </div>
           </div>
           <div
-            class="o-cf-delete"
+            class="o-cf-preview-range text-truncate"
           >
-            <div
-              class="o-cf-delete-button text-muted"
-              title="Remove rule"
-            >
-              <svg
-                class="o-cf-icon trash"
-                viewBox="0 0 448 512"
-                xmlns="http://www.w3.org/2000/svg"
-              >
-                <path
-                  d="M432 32H312l-9.4-18.7A24 24 0 0 0 281.1 0H166.8a23.72 23.72 0 0 0-21.4 13.3L136 32H16A16 16 0 0 0 0 48v32a16 16 0 0 0 16 16h416a16 16 0 0 0 16-16V48a16 16 0 0 0-16-16zM53.2 467a48 48 0 0 0 47.9 45h245.8a48 48 0 0 0 47.9-45L416 128H32z"
-                  fill="currentColor"
-                />
-              </svg>
-            </div>
+            A1:A2
           </div>
         </div>
-      </div>
-      <div
-        class="o-cf-preview d-flex position-relative"
-        data-id="2"
-        style=""
-      >
         <div
-          class="position-relative h-100 w-100 d-flex align-items-center"
+          class="o-cf-delete ms-auto"
         >
           <div
-            class="o-cf-drag-handle h-100 position-absolute d-flex align-items-center text-muted"
+            class="o-cf-delete-button text-muted"
+            title="Remove rule"
           >
             <svg
-              class="o-icon"
-              fill="currentColor"
-              viewBox="0 0 4 16"
+              class="o-cf-icon trash"
+              viewBox="0 0 448 512"
               xmlns="http://www.w3.org/2000/svg"
             >
-              <circle
-                cx="2"
-                cy="3.5"
-                r="1"
-              />
-              <circle
-                cx="2"
-                cy="6.5"
-                r="1"
-              />
-              <circle
-                cx="2"
-                cy="9.5"
-                r="1"
-              />
-              <circle
-                cx="2"
-                cy="12.5"
-                r="1"
+              <path
+                d="M432 32H312l-9.4-18.7A24 24 0 0 0 281.1 0H166.8a23.72 23.72 0 0 0-21.4 13.3L136 32H16A16 16 0 0 0 0 48v32a16 16 0 0 0 16 16h416a16 16 0 0 0 16-16V48a16 16 0 0 0-16-16zM53.2 467a48 48 0 0 0 47.9 45h245.8a48 48 0 0 0 47.9-45L416 128H32z"
+                fill="currentColor"
               />
             </svg>
           </div>
-          
-          <div
-            class="o-cf-preview-icon d-flex justify-content-around align-items-center me-2"
-            style="background-image: linear-gradient(to right, #FF00FF, #123456)"
+        </div>
+      </div>
+      <div
+        class="o-cf-preview d-flex position-relative align-items-center"
+        data-id="2"
+        style=""
+      >
+        <div
+          class="o-cf-drag-handle h-100 position-absolute d-flex align-items-center text-muted"
+        >
+          <svg
+            class="o-icon"
+            fill="currentColor"
+            viewBox="0 0 4 16"
+            xmlns="http://www.w3.org/2000/svg"
           >
-             123 
-          </div>
-          
+            <circle
+              cx="2"
+              cy="3.5"
+              r="1"
+            />
+            <circle
+              cx="2"
+              cy="6.5"
+              r="1"
+            />
+            <circle
+              cx="2"
+              cy="9.5"
+              r="1"
+            />
+            <circle
+              cx="2"
+              cy="12.5"
+              r="1"
+            />
+          </svg>
+        </div>
+        
+        <div
+          class="o-cf-preview-icon d-flex justify-content-around align-items-center me-3 flex-shrink-0"
+          style="background-image: linear-gradient(to right, #FF00FF, #123456)"
+        >
+           123 
+        </div>
+        
+        <div
+          class="o-cf-preview-description me-3 overflow-auto"
+        >
           <div
-            class="o-cf-preview-description"
+            class="o-cf-preview-ruletype"
           >
             <div
-              class="o-cf-preview-ruletype"
-            >
-              <div
-                class="o-cf-preview-description-rule text-truncate"
-              >
-                Color scale
-              </div>
-            </div>
-            <div
-              class="o-cf-preview-range text-truncate"
+              class="o-cf-preview-description-rule text-truncate"
             >
-              B1:B5
+              Color scale
             </div>
           </div>
           <div
-            class="o-cf-delete"
+            class="o-cf-preview-range text-truncate"
           >
-            <div
-              class="o-cf-delete-button text-muted"
-              title="Remove rule"
+            B1:B5
+          </div>
+        </div>
+        <div
+          class="o-cf-delete ms-auto"
+        >
+          <div
+            class="o-cf-delete-button text-muted"
+            title="Remove rule"
+          >
+            <svg
+              class="o-cf-icon trash"
+              viewBox="0 0 448 512"
+              xmlns="http://www.w3.org/2000/svg"
             >
-              <svg
-                class="o-cf-icon trash"
-                viewBox="0 0 448 512"
-                xmlns="http://www.w3.org/2000/svg"
-              >
-                <path
-                  d="M432 32H312l-9.4-18.7A24 24 0 0 0 281.1 0H166.8a23.72 23.72 0 0 0-21.4 13.3L136 32H16A16 16 0 0 0 0 48v32a16 16 0 0 0 16 16h416a16 16 0 0 0 16-16V48a16 16 0 0 0-16-16zM53.2 467a48 48 0 0 0 47.9 45h245.8a48 48 0 0 0 47.9-45L416 128H32z"
-                  fill="currentColor"
-                />
-              </svg>
-            </div>
+              <path
+                d="M432 32H312l-9.4-18.7A24 24 0 0 0 281.1 0H166.8a23.72 23.72 0 0 0-21.4 13.3L136 32H16A16 16 0 0 0 0 48v32a16 16 0 0 0 16 16h416a16 16 0 0 0 16-16V48a16 16 0 0 0-16-16zM53.2 467a48 48 0 0 0 47.9 45h245.8a48 48 0 0 0 47.9-45L416 128H32z"
+                fill="currentColor"
+              />
+            </svg>
           </div>
         </div>
       </div>