Animate the column height with a stimulus controller so that it does not depend to the server to update when you D&D

app/javascript/controllers/css_variable_counter_controller.js

@@ -0,0 +1,33 @@
+import { Controller } from "@hotwired/stimulus"
+import { debounce } from "helpers/timing_helpers"
+
+export default class extends Controller {
+  static targets = [ "item", "counter" ]
+  static values = {
+    propertyName: String,
+    maxValue: { type: Number, default: 20 }
+  }
+
+  initialize() {
+    this.#updateCounter = debounce(this.#updateCounter.bind(this), 50)
+  }
+
+  connect() {
+    this.#updateCounter()
+  }
+
+  itemTargetConnected() {
+    this.#updateCounter()
+  }
+
+  itemTargetDisconnected() {
+    this.#updateCounter()
+  }
+
+  #updateCounter = () => {
+    if (!this.hasCounterTarget) return
+
+    const count = Math.min(this.itemTargets.length, this.maxValueValue)
+    this.counterTarget.style.setProperty(this.propertyNameValue, count)
+  }
+}