diff --git a/src/BloomBrowserUI/bookEdit/css/origami.less b/src/BloomBrowserUI/bookEdit/css/origami.less
index df6ab2dbf2ab..cc01328b8819 100644
--- a/src/BloomBrowserUI/bookEdit/css/origami.less
+++ b/src/BloomBrowserUI/bookEdit/css/origami.less
@@ -204,6 +204,9 @@
 
 //Assume too small to show
 .split-pane-component-inner {
+    container-type: size;
+    container-name: split-pane-component-inner;
+
     .vertical-adders {
         display: none;
     }
@@ -214,7 +217,7 @@
 }
 
 //If wide enough, show the horizontal adders with medium size
-.split-pane-component-inner[min-width~="60px"] {
+@container split-pane-component-inner (min-width: 60px) {
     .horizontal-adders {
         width: @mediumClusterThickness;
         height: @mediumSplitterLength;
@@ -222,22 +225,23 @@
 }
 
 //If tall enough, show the vertical adders with medium size
-.split-pane-component-inner[min-height~="60px"] {
+@container split-pane-component-inner (min-height: 60px) {
     .vertical-adders {
         width: @mediumSplitterLength;
         height: @mediumClusterThickness;
     }
 }
 
-.split-pane-component-inner[min-width~="150px"][min-height~="150px"]
+@container split-pane-component-inner (min-width: 150px) and (min-height: 150px) {
     .textBox-identifier {
-    transition-property: font-size;
-    transition-duration: 0.5s;
-    font-size: 24pt;
+        transition-property: font-size;
+        transition-duration: 0.5s;
+        font-size: 24pt;
+    }
 }
 
 //If really tall, show the vertical adders with large size
-.split-pane-component-inner[min-height~="250px"] {
+@container split-pane-component-inner (min-height: 250px) {
     .vertical-adders {
         height: @largeClusterThickness;
     }
@@ -248,7 +252,7 @@
 }
 
 //If really wide, show the horizontal adders with large size
-.split-pane-component-inner[min-width~="250px"] {
+@container split-pane-component-inner (min-width: 250px) {
     .vertical-adders {
         width: @largeSplitterLength;
     }
diff --git a/src/BloomBrowserUI/bookEdit/js/bloomEditing.ts b/src/BloomBrowserUI/bookEdit/js/bloomEditing.ts
index ab5f0eb98f8a..7f3e39d8d697 100644
--- a/src/BloomBrowserUI/bookEdit/js/bloomEditing.ts
+++ b/src/BloomBrowserUI/bookEdit/js/bloomEditing.ts
@@ -122,7 +122,6 @@ function Cleanup() {
 
     bloomQtipUtils.cleanupBubbles(); // all 3 kinds!
 
-    $("*.resize-sensor").remove(); // from css-element-queries
     $("*.editTimeOnly").remove();
     $("*.dragHandle").remove();
     $("*").removeAttr("data-easytabs");
diff --git a/src/BloomBrowserUI/bookEdit/js/origami.ts b/src/BloomBrowserUI/bookEdit/js/origami.ts
index e5bb91a50156..bca7c23a80ea 100644
--- a/src/BloomBrowserUI/bookEdit/js/origami.ts
+++ b/src/BloomBrowserUI/bookEdit/js/origami.ts
@@ -5,7 +5,6 @@ import { kBloomCanvasClass } from "../toolbox/canvas/canvasElementUtils";
 import "../../lib/split-pane/split-pane.js";
 import TextBoxProperties from "../TextBoxProperties/TextBoxProperties";
 import { post, postThatMightNavigate } from "../../utils/bloomApi";
-import { ElementQueries } from "css-element-queries";
 import { theOneCanvasElementManager } from "./CanvasElementManager";
 import { getFeatureStatusAsync } from "../../react_components/featureStatus";
 import $ from "jquery";
@@ -114,9 +113,6 @@ function setupLayoutMode() {
             origamiUndo();
         }
     });
-
-    //have  css-element-queries notice the new elements and track them, adding classes that let rules trigger depending on size
-    ElementQueries.init();
 }
 
 // N.B. If you add/remove a container class, you'll likely need to modify 'createTypeSelectors()' too.
@@ -185,8 +181,6 @@ function splitClickHandler() {
         performSplit(myInner, "horizontal", "top", "bottom", false);
     else if ($(this).hasClass("add-left"))
         performSplit(myInner, "vertical", "right", "left", true);
-
-    ElementQueries.init(); //notice the new elements and track them, adding classes that let rules trigger depending on size
 }
 
 function performSplit(
diff --git a/src/BloomBrowserUI/package.json b/src/BloomBrowserUI/package.json
index c769abdd0195..fbd2ae0f3c8f 100644
--- a/src/BloomBrowserUI/package.json
+++ b/src/BloomBrowserUI/package.json
@@ -138,7 +138,6 @@
         "color-blind": "^0.1.1",
         "comicaljs": "^0.3.100",
         "contentful": "^8.3.7",
-        "css-element-queries": "^1.2.3",
         "filesize": "^6.1.0",
         "global": "^4.3.2",
         "html-entities": "^2.1.0",
diff --git a/src/BloomBrowserUI/yarn.lock b/src/BloomBrowserUI/yarn.lock
index ee407ac4f839..b2bb6bc1b128 100644
--- a/src/BloomBrowserUI/yarn.lock
+++ b/src/BloomBrowserUI/yarn.lock
@@ -4910,11 +4910,6 @@ css-color-keywords@^1.0.0:
   resolved "https://registry.yarnpkg.com/css-color-keywords/-/css-color-keywords-1.0.0.tgz#fea2616dc676b2962686b3af8dbdbe180b244e05"
   integrity sha512-FyyrDHZKEjXDpNJYvVsV960FiqQyXc/LlYmsxl2BcdMb2WPx0OGRVgTg55rPSyLSNMqP52R9r8geSp7apN3Ofg==
 
-css-element-queries@^1.2.3:
-  version "1.2.3"
-  resolved "https://registry.yarnpkg.com/css-element-queries/-/css-element-queries-1.2.3.tgz#e14940b1fcd4bf0da60ea4145d05742d7172e516"
-  integrity sha512-QK9uovYmKTsV2GXWQiMOByVNrLn2qz6m3P7vWpOR4IdD6I3iXoDw5qtgJEN3Xq7gIbdHVKvzHjdAtcl+4Arc4Q==
-
 css-to-react-native@^3.0.0:
   version "3.1.0"
   resolved "https://registry.yarnpkg.com/css-to-react-native/-/css-to-react-native-3.1.0.tgz#e783474149997608986afcff614405714a8fe1ac"