diff --git a/src/components/file-input/file-input.ts b/src/components/file-input/file-input.ts
index 6f955e3e8..d43ffc7e5 100644
--- a/src/components/file-input/file-input.ts
+++ b/src/components/file-input/file-input.ts
@@ -190,8 +190,10 @@ export default class IgcFileInputComponent extends IgcInputBaseComponent {
           </igc-button>
         </div>
         <div part="file-names">
-          ${this._fileNames ??
-          html`<slot name="file-missing-text">${emptyText}</slot>`}
+          <span>
+            ${this._fileNames ??
+            html`<slot name="file-missing-text">${emptyText}</slot>`}
+          </span>
         </div>
       </div>
     `;
diff --git a/src/components/file-input/themes/file-input.base.scss b/src/components/file-input/themes/file-input.base.scss
index bc902ae42..599a716cd 100644
--- a/src/components/file-input/themes/file-input.base.scss
+++ b/src/components/file-input/themes/file-input.base.scss
@@ -18,10 +18,15 @@ $theme: $base;
     }
 
     [part='file-names'] {
-        @include ellipsis();
-
-        align-content: center;
+        display: flex;
+        align-items: center;
+        max-height: var-get($theme, 'size');
+        height: 100%;
         grid-area: 1 / 3;
+
+        > span {
+            @include ellipsis();
+        }
     }
 
     [part~='container'] {
@@ -39,6 +44,11 @@ $theme: $base;
         opacity: 0;
     }
 
+    [part~='container'],
+    [part~='input'] {
+        height: var-get($theme, 'size');
+    }
+
     [part~='input']::file-selector-button {
         width: 100%;
         cursor: auto;