diff --git a/css/frontend_editing.css b/css/frontend_editing.css
index 2c92d55129e85c33cea4eb9c7a41d3c738a02058..e7565f9b573e8ddbb7b826b461edac8f4f1bccb1 100644
--- a/css/frontend_editing.css
+++ b/css/frontend_editing.css
@@ -17,9 +17,6 @@ body.path-frontend-editing {
   transition: width 0.5s;
   overflow: auto;
 }
-.editing-container--wide {
-  width: 80%;
-}
 .editing-container--loading {
   animation-duration: 1.8s;
   animation-fill-mode: forwards;
@@ -442,3 +439,18 @@ button.fe-confirm-dialog-button--false {
   background-color: rgba(var(--fe-editing-primary-color), 0.6);
   border-color: rgba(var(--fe-editing-primary-color), 0.6);
 }
+
+/* Sidebar */
+.sidebar-resizer {
+  width: 5px; 
+  cursor: ew-resize;
+  height: 100%; 
+  position: absolute; 
+  left: 0; 
+  top: 0;
+}
+
+/* Prevents dragging of content while sidebar is resized */
+body:has(.sidebar-resizer:hover) .frontend-editing {
+  pointer-events: none;
+}
diff --git a/js/frontend_editing.js b/js/frontend_editing.js
index 899358f2e6b34038c5e5945fd797e1c434accff6..2fef7e9dab4cef30067dfef52e49d03b23109821 100644
--- a/js/frontend_editing.js
+++ b/js/frontend_editing.js
@@ -56,9 +56,63 @@
   // Global variables
   let sidebarWidth = 30;
   let sidebarFullWidth = 70;
+  const editWideClass = 'editing-container--wide';
 
   Drupal.frontendEditing = Drupal.frontendEditing || {};
 
+  Drupal.frontendEditing.sidebarResizer = function (editContainer) {
+    const $sidebarResizer = document.createElement('div');
+    $sidebarResizer.classList.add('sidebar-resizer');
+    editContainer.append($sidebarResizer);
+
+    let isResizing = false;
+    let resizedWidth;
+
+    $sidebarResizer.addEventListener('mousedown', (e) => {
+      isResizing = true;
+
+      document.body.style.cursor = 'ew-resize';
+      document.body.style.userSelect = 'none';
+      editContainer.style.transition = 'none';
+    });
+
+    window.addEventListener('mousemove', (e) => {
+      if (!isResizing) return;
+
+      // Prevent text selection and dragging.
+      editContainer.style.pointerEvents = 'none';
+
+      const windowWidth = window.innerWidth;
+      const newWidth = windowWidth - e.clientX;
+      const newWidthPercent = (newWidth / windowWidth) * 100;
+
+      // Set a min and max width for the sidebar.
+      // -5% from the default width is the minimum width of the sidebar.
+      if (newWidthPercent >= (sidebarWidth - 5) && newWidthPercent < 90) {
+        editContainer.style.width = `${newWidthPercent}%`;
+        resizedWidth = newWidthPercent;
+      }
+    });
+
+    window.addEventListener('mouseup', () => {
+      if (!isResizing) return;
+
+      editContainer.style.pointerEvents = 'auto';
+      document.body.style.cursor = '';
+      document.body.style.userSelect = '';
+      editContainer.style.transition = '';
+
+      if(resizedWidth > sidebarWidth) {
+        editContainer.classList.add(editWideClass);
+      }
+      else {
+        editContainer.classList.remove(editWideClass);
+      }
+
+      isResizing = false;
+    });
+  };
+
   // Remove all placeholders.
   Drupal.frontendEditing.removePlaceholder = function () {
     // Delete all previews placeholders.
@@ -93,18 +147,23 @@
         'editing-container',
         'editing-container--loading',
       );
+
       document.body.append(editContainer);
+
+      // Add sidebar resizer.
+      Drupal.frontendEditing.sidebarResizer(editContainer);
+
       editContainer.style.width = sidebarClassWidth;
     } else {
       editContainer.innerHTML = '';
     }
     // Setup width toggle button.
-    const editWideClass = 'editing-container--wide';
     const widthToggle = document.createElement('button');
     widthToggle.type = 'button';
     widthToggle.className = 'editing-container__toggle';
     widthToggle.addEventListener('click', function (e) {
-      if (editContainer.classList.contains(editWideClass)) {
+      const currentWidth = parseFloat(editContainer.style.width) || 0;
+      if (editContainer.classList.contains(editWideClass) || currentWidth > sidebarWidth) {
         editContainer.classList.remove(editWideClass);
         editContainer.style.width = sidebarClassWidth;
       } else {
@@ -221,7 +280,8 @@
         '.frontend-editing-actions',
         context,
       );
-      // Find all elements with frontend editing action buttons and attach event listener.
+      // Find all elements with frontend editing action buttons and attach
+      // event listener.
       actionsElements.forEach(function (actionsElement) {
         actionsElement.addEventListener('mouseover', function () {
           const container = actionsElement.closest('.frontend-editing');