diff --git a/examples/github-repositories-custom-plugin/createGitHubReposPlugin.tsx b/examples/github-repositories-custom-plugin/createGitHubReposPlugin.tsx
index 703cb2055..993e2c09f 100644
--- a/examples/github-repositories-custom-plugin/createGitHubReposPlugin.tsx
+++ b/examples/github-repositories-custom-plugin/createGitHubReposPlugin.tsx
@@ -70,55 +70,57 @@ export function createGitHubReposPlugin(
 
                   return (
                     <Fragment>
-                      <div className="aa-ItemIcon">
-                        <img
-                          src={item.owner.avatar_url}
-                          alt={item.full_name}
-                          width="40"
-                          height="40"
-                        />
-                      </div>
                       <div className="aa-ItemContent">
-                        <div className="aa-ItemContentTitle">
-                          <div style={{ display: 'flex' }}>
-                            <div>{item.full_name}</div>
-                            <div
-                              style={{
-                                alignItems: 'center',
-                                display: 'flex',
-                                marginLeft: 'var(--aa-spacing-half)',
-                                position: 'relative',
-                                top: '1px',
-                              }}
-                            >
-                              <svg
-                                aria-label={`${stars} stars`}
-                                style={{
-                                  display: 'block',
-                                  width: 'calc(var(--aa-spacing-half) * 2)',
-                                  height: 'calc(var(--aa-spacing-half) * 2)',
-                                  color: '#ffa724',
-                                }}
-                                viewBox="0 0 20 20"
-                                fill="currentColor"
-                              >
-                                <path d="M9.049 2.927c.3-.921 1.603-.921 1.902 0l1.07 3.292a1 1 0 00.95.69h3.462c.969 0 1.371 1.24.588 1.81l-2.8 2.034a1 1 0 00-.364 1.118l1.07 3.292c.3.921-.755 1.688-1.54 1.118l-2.8-2.034a1 1 0 00-1.175 0l-2.8 2.034c-.784.57-1.838-.197-1.539-1.118l1.07-3.292a1 1 0 00-.364-1.118L2.98 8.72c-.783-.57-.38-1.81.588-1.81h3.461a1 1 0 00.951-.69l1.07-3.292z" />
-                              </svg>{' '}
-                              <span
-                                aria-hidden="true"
+                        <div className="aa-ItemIcon aa-ItemIcon--alignTop">
+                          <img
+                            src={item.owner.avatar_url}
+                            alt={item.full_name}
+                            width="40"
+                            height="40"
+                          />
+                        </div>
+                        <div className="aa-ItemContentBody">
+                          <div className="aa-ItemContentTitle">
+                            <div style={{ display: 'flex' }}>
+                              <div>{item.full_name}</div>
+                              <div
                                 style={{
-                                  color: 'var(--aa-content-text-color)',
-                                  fontSize: '0.8em',
-                                  lineHeight: 'normal',
+                                  alignItems: 'center',
+                                  display: 'flex',
+                                  marginLeft: 'var(--aa-spacing-half)',
+                                  position: 'relative',
+                                  top: '1px',
                                 }}
                               >
-                                {stars}
-                              </span>
+                                <svg
+                                  aria-label={`${stars} stars`}
+                                  style={{
+                                    display: 'block',
+                                    width: 'calc(var(--aa-spacing-half) * 2)',
+                                    height: 'calc(var(--aa-spacing-half) * 2)',
+                                    color: '#ffa724',
+                                  }}
+                                  viewBox="0 0 20 20"
+                                  fill="currentColor"
+                                >
+                                  <path d="M9.049 2.927c.3-.921 1.603-.921 1.902 0l1.07 3.292a1 1 0 00.95.69h3.462c.969 0 1.371 1.24.588 1.81l-2.8 2.034a1 1 0 00-.364 1.118l1.07 3.292c.3.921-.755 1.688-1.54 1.118l-2.8-2.034a1 1 0 00-1.175 0l-2.8 2.034c-.784.57-1.838-.197-1.539-1.118l1.07-3.292a1 1 0 00-.364-1.118L2.98 8.72c-.783-.57-.38-1.81.588-1.81h3.461a1 1 0 00.951-.69l1.07-3.292z" />
+                                </svg>{' '}
+                                <span
+                                  aria-hidden="true"
+                                  style={{
+                                    color: 'var(--aa-content-text-color)',
+                                    fontSize: '0.8em',
+                                    lineHeight: 'normal',
+                                  }}
+                                >
+                                  {stars}
+                                </span>
+                              </div>
                             </div>
                           </div>
-                        </div>
-                        <div className="aa-ItemContentDescription">
-                          {item.description}
+                          <div className="aa-ItemContentDescription">
+                            {item.description}
+                          </div>
                         </div>
                       </div>
                       <div className="aa-ItemActions">
diff --git a/packages/autocomplete-theme-classic/src/theme.scss b/packages/autocomplete-theme-classic/src/theme.scss
index c62c7c3a1..82e05af8a 100644
--- a/packages/autocomplete-theme-classic/src/theme.scss
+++ b/packages/autocomplete-theme-classic/src/theme.scss
@@ -171,7 +171,6 @@ body {
     display: flex;
     line-height: 1em;
     margin: 0;
-    padding: 0 calc(var(--aa-spacing) - 2px) 0 calc(var(--aa-spacing) - 1px);
     position: relative;
     width: 100%;
     &:focus-within {
@@ -189,22 +188,16 @@ body {
       align-items: center;
       display: flex;
       flex-shrink: 0;
+      height: var(--aa-search-input-height);
       order: 1;
       // Container for search and loading icons
       @at-root .aa-Label,
         .aa-LoadingIndicator {
         cursor: initial;
         flex-shrink: 0;
+        height: 100%;
         padding: 0;
         text-align: left;
-        width: calc(var(--aa-icon-size) + var(--aa-spacing));
-        button {
-          appearance: none;
-          background: none;
-          border: 0;
-          margin: 0;
-          padding: 2px;
-        }
         svg {
           color: rgba(var(--aa-primary-color-rgb), 1);
           height: auto;
@@ -213,6 +206,31 @@ body {
           width: var(--aa-input-icon-size);
         }
       }
+      @at-root .aa-SubmitButton,
+        .aa-LoadingIndicator {
+        height: 100%;
+        padding-left: calc(var(--aa-spacing) * 0.75 - 1px);
+        padding-right: var(--aa-spacing-half);
+        width: calc(var(--aa-spacing) * 1.75 + var(--aa-icon-size) - 1px);
+        @media (hover: none) and (pointer: coarse) {
+          padding-left: calc(var(--aa-spacing-half) / 2 - 1px);
+          width: calc(var(--aa-icon-size) + (var(--aa-spacing) * 1.25) - 1px);
+        }
+      }
+      @at-root .aa-SubmitButton {
+        appearance: none;
+        background: none;
+        border: 0;
+        margin: 0;
+      }
+      @at-root .aa-LoadingIndicator {
+        align-items: center;
+        display: flex;
+        justify-content: center;
+        &[hidden] {
+          display: none;
+        }
+      }
     }
     @at-root .aa-InputWrapper {
       order: 3;
@@ -226,6 +244,7 @@ body {
         color: rgba(var(--aa-text-color-rgb), var(--aa-text-color-alpha));
         font: inherit;
         height: var(--aa-search-input-height);
+        padding: 0;
         width: 100%;
         &::placeholder {
           color: rgba(var(--aa-muted-color-rgb), var(--aa-muted-color-alpha));
@@ -249,6 +268,7 @@ body {
     @at-root .aa-InputWrapperSuffix {
       align-items: center;
       display: flex;
+      height: var(--aa-search-input-height);
       order: 4;
       // Accelerator to clear the query
       @at-root .aa-ClearButton {
@@ -258,8 +278,12 @@ body {
         color: rgba(var(--aa-muted-color-rgb), var(--aa-muted-color-alpha));
         cursor: pointer;
         display: flex;
+        height: 100%;
         margin: 0;
-        padding: 2px;
+        padding: 0 calc(var(--aa-spacing) * (5 / 6) - 0.5px);
+        @media (hover: none) and (pointer: coarse) {
+          padding: 0 calc(var(--aa-spacing) * (2 / 3) - 0.5px);
+        }
         &:hover,
         &:focus {
           color: rgba(var(--aa-text-color-rgb), var(--aa-text-color-alpha));