diff --git a/public/app/features/canvas/runtime/ables.tsx b/public/app/features/canvas/runtime/ables.tsx
index a31520ed2ce..621e3afba8e 100644
--- a/public/app/features/canvas/runtime/ables.tsx
+++ b/public/app/features/canvas/runtime/ables.tsx
@@ -55,7 +55,7 @@ export const constraintViewable = (scene: Scene) => ({
     let verticalConstraintVisualization = null;
     let horizontalConstraintVisualization = null;
 
-    const constraint = targetElement?.options.constraint ?? {};
+    const constraint = targetElement?.tempConstraint ?? targetElement?.options.constraint ?? {};
 
     const borderStyle = '1px dashed #4af';
 
diff --git a/public/app/features/canvas/runtime/element.tsx b/public/app/features/canvas/runtime/element.tsx
index b83e8543265..4b05a059308 100644
--- a/public/app/features/canvas/runtime/element.tsx
+++ b/public/app/features/canvas/runtime/element.tsx
@@ -11,7 +11,7 @@ import {
 import { notFoundItem } from 'app/features/canvas/elements/notFound';
 import { DimensionContext } from 'app/features/dimensions';
 
-import { HorizontalConstraint, Placement, VerticalConstraint } from '../types';
+import { Constraint, HorizontalConstraint, Placement, VerticalConstraint } from '../types';
 
 import { FrameState } from './frame';
 import { RootElement } from './root';
@@ -29,6 +29,9 @@ export class ElementState implements LayerElement {
   // Determine whether or not element is in motion or not (via moveable)
   isMoving = false;
 
+  // Temp stored constraint for visualization purposes (switch to top / left constraint to simplify some functionality)
+  tempConstraint: Constraint | undefined;
+
   // Filled in by ref
   div?: HTMLDivElement;
 
@@ -377,68 +380,32 @@ export class ElementState implements LayerElement {
   // kinda like:
   // https://github.com/grafana/grafana-edge-app/blob/main/src/panels/draw/WrapItem.tsx#L44
   applyResize = (event: OnResize) => {
-    const { options } = this;
-    const { placement, constraint } = options;
-    const { vertical, horizontal } = constraint ?? {};
-
-    const top = vertical === VerticalConstraint.Top || vertical === VerticalConstraint.TopBottom;
-    const bottom = vertical === VerticalConstraint.Bottom || vertical === VerticalConstraint.TopBottom;
-    const left = horizontal === HorizontalConstraint.Left || horizontal === HorizontalConstraint.LeftRight;
-    const right = horizontal === HorizontalConstraint.Right || horizontal === HorizontalConstraint.LeftRight;
+    const placement = this.options.placement!;
 
     const style = event.target.style;
     const deltaX = event.delta[0];
     const deltaY = event.delta[1];
     const dirLR = event.direction[0];
     const dirTB = event.direction[1];
+
     if (dirLR === 1) {
-      // RIGHT
-      if (right) {
-        placement!.right! -= deltaX;
-        style.right = `${placement!.right}px`;
-        if (!left) {
-          placement!.width = event.width;
-          style.width = `${placement!.width}px`;
-        }
-      } else {
-        placement!.width! = event.width;
-        style.width = `${placement!.width}px`;
-      }
+      placement.width = event.width;
+      style.width = `${placement.width}px`;
     } else if (dirLR === -1) {
-      // LEFT
-      if (left) {
-        placement!.left! -= deltaX;
-        placement!.width! = event.width;
-        style.left = `${placement!.left}px`;
-        style.width = `${placement!.width}px`;
-      } else {
-        placement!.width! += deltaX;
-        style.width = `${placement!.width}px`;
-      }
+      placement.left! -= deltaX;
+      placement.width = event.width;
+      style.left = `${placement.left}px`;
+      style.width = `${placement.width}px`;
     }
 
     if (dirTB === -1) {
-      // TOP
-      if (top) {
-        placement!.top! -= deltaY;
-        placement!.height = event.height;
-        style.top = `${placement!.top}px`;
-        style.height = `${placement!.height}px`;
-      } else {
-        placement!.height = event.height;
-        style.height = `${placement!.height}px`;
-      }
+      placement.top! -= deltaY;
+      placement.height = event.height;
+      style.top = `${placement.top}px`;
+      style.height = `${placement.height}px`;
     } else if (dirTB === 1) {
-      // BOTTOM
-      if (bottom) {
-        placement!.bottom! -= deltaY;
-        placement!.height! = event.height;
-        style.bottom = `${placement!.bottom}px`;
-        style.height = `${placement!.height}px`;
-      } else {
-        placement!.height! = event.height;
-        style.height = `${placement!.height}px`;
-      }
+      placement.height = event.height;
+      style.height = `${placement.height}px`;
     }
   };
 
diff --git a/public/app/features/canvas/runtime/scene.tsx b/public/app/features/canvas/runtime/scene.tsx
index 2decff46999..e86919a43c6 100644
--- a/public/app/features/canvas/runtime/scene.tsx
+++ b/public/app/features/canvas/runtime/scene.tsx
@@ -28,7 +28,7 @@ import {
 import { CanvasContextMenu } from 'app/plugins/panel/canvas/CanvasContextMenu';
 import { LayerActionID } from 'app/plugins/panel/canvas/types';
 
-import { Placement } from '../types';
+import { HorizontalConstraint, Placement, VerticalConstraint } from '../types';
 
 import { constraintViewable, dimensionViewable } from './ables';
 import { ElementState } from './element';
@@ -349,6 +349,18 @@ export class Scene {
 
         this.moved.next(Date.now());
       })
+      .on('resizeStart', (event) => {
+        const targetedElement = this.findElementByTarget(event.target);
+
+        if (targetedElement) {
+          targetedElement.tempConstraint = { ...targetedElement.options.constraint };
+          targetedElement.options.constraint = {
+            vertical: VerticalConstraint.Top,
+            horizontal: HorizontalConstraint.Left,
+          };
+          targetedElement.setPlacementFromConstraint();
+        }
+      })
       .on('resize', (event) => {
         const targetedElement = this.findElementByTarget(event.target);
         targetedElement!.applyResize(event);
@@ -365,7 +377,12 @@ export class Scene {
         const targetedElement = this.findElementByTarget(event.target);
 
         if (targetedElement) {
-          targetedElement?.setPlacementFromConstraint();
+          if (targetedElement.tempConstraint) {
+            targetedElement.options.constraint = targetedElement.tempConstraint;
+            targetedElement.tempConstraint = undefined;
+          }
+
+          targetedElement.setPlacementFromConstraint();
         }
       });
 
diff --git a/public/app/plugins/panel/canvas/editor/PlacementEditor.tsx b/public/app/plugins/panel/canvas/editor/PlacementEditor.tsx
index 8dd44107164..1080cd38179 100644
--- a/public/app/plugins/panel/canvas/editor/PlacementEditor.tsx
+++ b/public/app/plugins/panel/canvas/editor/PlacementEditor.tsx
@@ -80,6 +80,8 @@ export const PlacementEditor: FC<StandardEditorProps<any, CanvasEditorOptions, P
     }, 100);
   };
 
+  const constraint = element.tempConstraint ?? layout ?? {};
+
   return (
     <div>
       <QuickPositioning onPositionChange={onPositionChange} settings={settings} element={element} />
@@ -89,15 +91,11 @@ export const PlacementEditor: FC<StandardEditorProps<any, CanvasEditorOptions, P
           <ConstraintSelectionBox
             onVerticalConstraintChange={onVerticalConstraintChange}
             onHorizontalConstraintChange={onHorizontalConstraintChange}
-            currentConstraints={element.options.constraint ?? {}}
+            currentConstraints={constraint}
           />
           <VerticalGroup>
-            <Select options={verticalOptions} onChange={onVerticalConstraintSelect} value={layout?.vertical} />
-            <Select
-              options={horizontalOptions}
-              onChange={onHorizontalConstraintSelect}
-              value={options.constraint?.horizontal}
-            />
+            <Select options={verticalOptions} onChange={onVerticalConstraintSelect} value={constraint.vertical} />
+            <Select options={horizontalOptions} onChange={onHorizontalConstraintSelect} value={constraint.horizontal} />
           </VerticalGroup>
         </HorizontalGroup>
       </Field>