diff --git a/src/components/side_panel/conditional_formatting/cf_preview/cf_preview.css b/src/components/side_panel/conditional_formatting/cf_preview/cf_preview.css
index 576b037174..7aa6f1cc60 100644
--- a/src/components/side_panel/conditional_formatting/cf_preview/cf_preview.css
+++ b/src/components/side_panel/conditional_formatting/cf_preview/cf_preview.css
@@ -17,7 +17,6 @@
       display: none;
     }
     .o-cf-preview-icon {
-      position: absolute;
       height: 50px;
       width: 50px;
       .o-icon {
@@ -26,12 +25,6 @@
       }
     }
     .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;
         max-height: 2.8em;
@@ -41,16 +34,11 @@
         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/cf_preview.xml b/src/components/side_panel/conditional_formatting/cf_preview/cf_preview.xml
index 8175bed80a..74d7413dc1 100644
--- a/src/components/side_panel/conditional_formatting/cf_preview/cf_preview.xml
+++ b/src/components/side_panel/conditional_formatting/cf_preview/cf_preview.xml
@@ -2,48 +2,45 @@
   <t t-name="o-spreadsheet-ConditionalFormatPreview">
     <t t-set="cf" t-value="props.conditionalFormat"/>
     <div
-      class="o-cf-preview w-100 border-bottom"
+      class="o-cf-preview w-100 d-flex align-items-center border-bottom"
       t-ref="cfPreview"
       t-att-class="props.class"
       t-att-data-id="cf.id"
       t-on-click="props.onPreviewClick"
       t-on-pointerdown="(ev) => this.onMouseDown(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 o-button-icon">
+        <t t-call="o-spreadsheet-Icon.THIN_DRAG_HANDLE"/>
+      </div>
+      <t t-if="cf.rule.type==='IconSetRule'">
         <div
-          class="o-cf-drag-handle h-100 position-absolute d-flex align-items-center o-button-icon">
-          <t t-call="o-spreadsheet-Icon.THIN_DRAG_HANDLE"/>
+          class="o-cf-preview-icon d-flex justify-content-around align-items-center me-3 bg-white border">
+          <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 bg-white border">
-            <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 border">
-            123
-          </div>
-        </t>
-        <div class="o-cf-preview-description">
-          <div class="o-cf-preview-ruletype">
-            <div class="o-cf-preview-description-rule o-fw-bold 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 border">
+          123
         </div>
-        <div class="o-cf-delete">
-          <div
-            class="o-cf-delete-button o-button-icon"
-            t-on-click.stop="(ev) => this.deleteConditionalFormat(cf, ev)"
-            title="Remove rule">
-            <t t-call="o-spreadsheet-Icon.TRASH_FILLED"/>
+      </t>
+      <div class="o-cf-preview-description me-3 overflow-auto">
+        <div class="o-cf-preview-ruletype">
+          <div class="o-cf-preview-description-rule o-fw-bold 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 o-button-icon"
+          t-on-click.stop="(ev) => this.deleteConditionalFormat(cf, ev)"
+          title="Remove rule">
+          <t t-call="o-spreadsheet-Icon.TRASH_FILLED"/>
+        </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 bcac99ad3e..8887dd4fce 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
@@ -15,83 +15,79 @@ exports[`UI of conditional formats Conditional format list simple snapshot 1`] =
         style=""
       >
         <div
-          class="o-cf-preview w-100 border-bottom"
+          class="o-cf-preview w-100 d-flex align-items-center border-bottom"
           data-id="1"
         >
           <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 o-button-icon"
           >
-            <div
-              class="o-cf-drag-handle h-100 position-absolute d-flex align-items-center o-button-icon"
-            >
-              <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 border"
-              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 border"
+            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"
+                class="o-cf-preview-description-rule o-fw-bold text-truncate"
               >
-                <div
-                  class="o-cf-preview-description-rule o-fw-bold text-truncate"
-                >
-                  Value is equal to 2
-                </div>
-              </div>
-              <div
-                class="o-cf-preview-range text-truncate"
-              >
-                A1:A2
+                Value is equal to 2
               </div>
             </div>
             <div
-              class="o-cf-delete"
+              class="o-cf-preview-range text-truncate"
+            >
+              A1:A2
+            </div>
+          </div>
+          <div
+            class="o-cf-delete ms-auto"
+          >
+            <div
+              class="o-cf-delete-button o-button-icon"
+              title="Remove rule"
             >
               <div
-                class="o-cf-delete-button o-button-icon"
-                title="Remove rule"
+                class="o-icon"
               >
-                <div
-                  class="o-icon"
-                >
-                  <i
-                    class="fa fa-trash"
-                  />
-                </div>
+                <i
+                  class="fa fa-trash"
+                />
               </div>
             </div>
           </div>
@@ -102,83 +98,79 @@ exports[`UI of conditional formats Conditional format list simple snapshot 1`] =
         style=""
       >
         <div
-          class="o-cf-preview w-100 border-bottom"
+          class="o-cf-preview w-100 d-flex align-items-center border-bottom"
           data-id="2"
         >
           <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 o-button-icon"
           >
-            <div
-              class="o-cf-drag-handle h-100 position-absolute d-flex align-items-center o-button-icon"
-            >
-              <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 border"
-              style="background-image: linear-gradient(to right, #FF00FF, #123456)"
+            <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 border"
+            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"
+                class="o-cf-preview-description-rule o-fw-bold text-truncate"
               >
-                <div
-                  class="o-cf-preview-description-rule o-fw-bold text-truncate"
-                >
-                  Color scale
-                </div>
-              </div>
-              <div
-                class="o-cf-preview-range text-truncate"
-              >
-                B1:B5
+                Color scale
               </div>
             </div>
             <div
-              class="o-cf-delete"
+              class="o-cf-preview-range text-truncate"
+            >
+              B1:B5
+            </div>
+          </div>
+          <div
+            class="o-cf-delete ms-auto"
+          >
+            <div
+              class="o-cf-delete-button o-button-icon"
+              title="Remove rule"
             >
               <div
-                class="o-cf-delete-button o-button-icon"
-                title="Remove rule"
+                class="o-icon"
               >
-                <div
-                  class="o-icon"
-                >
-                  <i
-                    class="fa fa-trash"
-                  />
-                </div>
+                <i
+                  class="fa fa-trash"
+                />
               </div>
             </div>
           </div>