diff --git a/addons/web/static/src/core/resizable_panel/resizable_panel.js b/addons/web/static/src/core/resizable_panel/resizable_panel.js
index 1d249d3c4da..cb2d6a789f3 100644
--- a/addons/web/static/src/core/resizable_panel/resizable_panel.js
+++ b/addons/web/static/src/core/resizable_panel/resizable_panel.js
@@ -14,6 +14,7 @@ import {
 function useResizable({
     containerRef,
     handleRef,
+    initialWidth = 400,
     getMinWidth = () => 400,
     onResize = () => {},
     getResizeSide = () => "end",
@@ -48,7 +49,7 @@ function useResizable({
 
     onMounted(() => {
         if (handleRef.el) {
-            resize(computeFinalWidth(minWidth));
+            resize(initialWidth);
             handleRef.el.addEventListener("mousedown", onMouseDown);
         }
     });
@@ -127,6 +128,7 @@ export class ResizablePanel extends Component {
     static components = {};
     static props = {
         onResize: { type: Function, optional: true },
+        initialWidth: { type: Number, optional: true },
         minWidth: { type: Number, optional: true },
         class: { type: String, optional: true },
         slots: { type: Object },
@@ -137,6 +139,7 @@ export class ResizablePanel extends Component {
     };
     static defaultProps = {
         onResize: () => {},
+        width: 400,
         minWidth: 400,
         class: "",
         handleSide: "end",
@@ -147,6 +150,7 @@ export class ResizablePanel extends Component {
             containerRef: "containerRef",
             handleRef: "handleRef",
             onResize: this.props.onResize,
+            initialWidth: this.props.initialWidth,
             getMinWidth: (props) => props.minWidth,
             getResizeSide: (props) => props.handleSide,
         });
diff --git a/addons/web/static/tests/core/resizable_panel_tests.js b/addons/web/static/tests/core/resizable_panel_tests.js
index cc3c7318a39..82c49016a00 100644
--- a/addons/web/static/tests/core/resizable_panel_tests.js
+++ b/addons/web/static/tests/core/resizable_panel_tests.js
@@ -1,8 +1,8 @@
 /** @odoo-module **/
 
-import { ResizablePanel } from "@web_studio/client_action/xml_resource_editor/resizable_panel/resizable_panel";
 import { Component, reactive, xml } from "@odoo/owl";
 import { browser } from "@web/core/browser/browser";
+import { ResizablePanel } from "@web/core/resizable_panel/resizable_panel";
 import { makeTestEnv } from "@web/../tests/helpers/mock_env";
 import {
     getFixture,
@@ -57,7 +57,7 @@ QUnit.module("Resizable Panel", ({ beforeEach }) => {
             static template = xml`
                 <div class="d-flex parent-el" style="direction: rtl;">
                     <div style="width: 50px;" />
-                    <ResizablePanel minWidth="20" >
+                    <ResizablePanel minWidth="20" initialWidth="30">
                         <div style="width: 10px;" class="text-break">
                             A cool paragraph
                         </div>
@@ -69,7 +69,7 @@ QUnit.module("Resizable Panel", ({ beforeEach }) => {
         const parentEl = target.querySelector(".parent-el");
         const resizablePanelEl = target.querySelector(".o_resizable_panel");
         let resizablePabelRect = resizablePanelEl.getBoundingClientRect();
-        assert.strictEqual(resizablePabelRect.width, 22.5);
+        assert.strictEqual(resizablePabelRect.width, 30);
 
         const handle = resizablePanelEl.querySelector(".o_resizable_panel_handle");
         await triggerEvents(handle, null, ["mousedown", ["mousemove", { clientX: 10 }], "mouseup"]);
@@ -82,7 +82,7 @@ QUnit.module("Resizable Panel", ({ beforeEach }) => {
             static components = { ResizablePanel };
             static template = xml`
                 <div class="d-flex parent-el">
-                    <ResizablePanel minWidth="20" handleSide="'start'" class="'position-fixed'">
+                    <ResizablePanel minWidth="20" initialWidth="30" handleSide="'start'" class="'position-fixed'">
                         <div style="width: 10px;" class="text-break">
                             A cool paragraph
                         </div>
@@ -94,7 +94,7 @@ QUnit.module("Resizable Panel", ({ beforeEach }) => {
         const resizablePanelEl = target.querySelector(".o_resizable_panel");
         resizablePanelEl.style.setProperty("right", "100px");
         let resizablePabelRect = resizablePanelEl.getBoundingClientRect();
-        assert.strictEqual(resizablePabelRect.width, 22.5);
+        assert.strictEqual(resizablePabelRect.width, 30);
 
         const handle = resizablePanelEl.querySelector(".o_resizable_panel_handle");
         await triggerEvents(handle, null, [