diff --git a/src/panels/lovelace/editor/card-editor/hui-card-picker.ts b/src/panels/lovelace/editor/card-editor/hui-card-picker.ts
index 14bd738d1d..76f4fe5db6 100644
--- a/src/panels/lovelace/editor/card-editor/hui-card-picker.ts
+++ b/src/panels/lovelace/editor/card-editor/hui-card-picker.ts
@@ -32,6 +32,7 @@ import { LovelaceCard } from "../../types";
 import { getCardStubConfig } from "../get-card-stub-config";
 import { CardPickTarget, Card } from "../types";
 import { coreCards } from "../lovelace-cards";
+import { styleMap } from "lit-html/directives/style-map";
 
 interface CardElement {
   card: Card;
@@ -54,6 +55,10 @@ export class HuiCardPicker extends LitElement {
 
   private _usedEntities?: string[];
 
+  private _width?: number;
+
+  private _height?: number;
+
   private _filterCards = memoizeOne(
     (cardElements: CardElement[], filter?: string): CardElement[] => {
       if (filter) {
@@ -92,26 +97,33 @@ export class HuiCardPicker extends LitElement {
         no-label-float
         @value-changed=${this._handleSearchChange}
       ></search-input>
-      <div class="cards-container">
-        ${this._filterCards(this._cards, this._filter).map(
-          (cardElement: CardElement) => cardElement.element
-        )}
-      </div>
-      <div class="cards-container">
-        <div
-          class="card manual"
-          @click=${this._cardPicked}
-          .config=${{ type: "" }}
-        >
-          <div class="preview description">
-            ${this.hass!.localize(
-              `ui.panel.lovelace.editor.card.generic.manual_description`
-            )}
-          </div>
-          <div class="card-header">
-            ${this.hass!.localize(
-              `ui.panel.lovelace.editor.card.generic.manual`
-            )}
+      <div
+        style=${styleMap({
+          width: `${this._width}px`,
+          height: `${this._height}px`,
+        })}
+      >
+        <div class="cards-container">
+          ${this._filterCards(this._cards, this._filter).map(
+            (cardElement: CardElement) => cardElement.element
+          )}
+        </div>
+        <div class="cards-container">
+          <div
+            class="card manual"
+            @click=${this._cardPicked}
+            .config=${{ type: "" }}
+          >
+            <div class="preview description">
+              ${this.hass!.localize(
+                `ui.panel.lovelace.editor.card.generic.manual_description`
+              )}
+            </div>
+            <div class="card-header">
+              ${this.hass!.localize(
+                `ui.panel.lovelace.editor.card.generic.manual`
+              )}
+            </div>
           </div>
         </div>
       </div>
@@ -153,6 +165,24 @@ export class HuiCardPicker extends LitElement {
     this._loadCards();
   }
 
+  protected updated(changedProps) {
+    super.updated(changedProps);
+    // Store the width and height so that when we search, box doesn't jump
+    const div = this.shadowRoot!.querySelector("div")!;
+    if (!this._width) {
+      const width = div.clientWidth;
+      if (width) {
+        this._width = width;
+      }
+    }
+    if (!this._height) {
+      const height = div.clientHeight;
+      if (height) {
+        this._height = height;
+      }
+    }
+  }
+
   private _loadCards() {
     let cards: Card[] = coreCards.map((card: Card) => ({
       name: this.hass!.localize(