diff --git a/packages/react-core/src/components/Alert/examples/AlertGroupAsync.tsx b/packages/react-core/src/components/Alert/examples/AlertGroupAsync.tsx
index aa1f4f785c7..30f944c2fff 100644
--- a/packages/react-core/src/components/Alert/examples/AlertGroupAsync.tsx
+++ b/packages/react-core/src/components/Alert/examples/AlertGroupAsync.tsx
@@ -6,6 +6,7 @@ import {
   AlertActionCloseButton,
   AlertVariant,
   InputGroup,
+  InputGroupItem,
   useInterval
 } from '@patternfly/react-core';
 
@@ -45,12 +46,16 @@ export const AlertGroupAsync: React.FunctionComponent = () => {
   return (
     <React.Fragment>
       <InputGroup style={{ marginBottom: '16px' }}>
-        <button onClick={startAsyncAlerts} type="button" className={btnClasses}>
-          Start async alerts
-        </button>
-        <button onClick={stopAsyncAlerts} type="button" className={btnClasses}>
-          Stop async alerts
-        </button>
+        <InputGroupItem>
+          <button onClick={startAsyncAlerts} type="button" className={btnClasses}>
+            Start async alerts
+          </button>
+        </InputGroupItem>
+        <InputGroupItem>
+          <button onClick={stopAsyncAlerts} type="button" className={btnClasses}>
+            Stop async alerts
+          </button>
+        </InputGroupItem>
       </InputGroup>
       <AlertGroup isToast isLiveRegion aria-live="assertive">
         {alerts.map(({ title, variant, key }) => (
diff --git a/packages/react-core/src/components/Alert/examples/AlertGroupMultipleDynamic.tsx b/packages/react-core/src/components/Alert/examples/AlertGroupMultipleDynamic.tsx
index e001739dfe8..8e0058ac254 100644
--- a/packages/react-core/src/components/Alert/examples/AlertGroupMultipleDynamic.tsx
+++ b/packages/react-core/src/components/Alert/examples/AlertGroupMultipleDynamic.tsx
@@ -5,7 +5,8 @@ import {
   AlertGroup,
   AlertActionCloseButton,
   AlertVariant,
-  InputGroup
+  InputGroup,
+  InputGroupItem
 } from '@patternfly/react-core';
 
 export const AlertGroupMultipleDynamic: React.FunctionComponent = () => {
@@ -34,9 +35,11 @@ export const AlertGroupMultipleDynamic: React.FunctionComponent = () => {
   return (
     <React.Fragment>
       <InputGroup style={{ marginBottom: '16px' }}>
-        <button onClick={addAlertCollection} type="button" className={btnClasses}>
-          Add alert collection
-        </button>
+        <InputGroupItem>
+          <button onClick={addAlertCollection} type="button" className={btnClasses}>
+            Add alert collection
+          </button>
+        </InputGroupItem>
       </InputGroup>
       <AlertGroup isToast isLiveRegion>
         {alerts.map(({ title, variant, key }) => (
diff --git a/packages/react-core/src/components/Alert/examples/AlertGroupSingularDynamic.tsx b/packages/react-core/src/components/Alert/examples/AlertGroupSingularDynamic.tsx
index c38ec95b3a7..cbb80001cbb 100644
--- a/packages/react-core/src/components/Alert/examples/AlertGroupSingularDynamic.tsx
+++ b/packages/react-core/src/components/Alert/examples/AlertGroupSingularDynamic.tsx
@@ -5,7 +5,8 @@ import {
   AlertGroup,
   AlertActionCloseButton,
   AlertVariant,
-  InputGroup
+  InputGroup,
+  InputGroupItem
 } from '@patternfly/react-core';
 
 export const AlertGroupSingularDynamic: React.FunctionComponent = () => {
@@ -38,15 +39,21 @@ export const AlertGroupSingularDynamic: React.FunctionComponent = () => {
   return (
     <React.Fragment>
       <InputGroup style={{ marginBottom: '16px' }}>
-        <button onClick={addSuccessAlert} type="button" className={btnClasses}>
-          Add single success alert
-        </button>
-        <button onClick={addDangerAlert} type="button" className={btnClasses}>
-          Add single danger alert
-        </button>
-        <button onClick={addInfoAlert} type="button" className={btnClasses}>
-          Add single info alert
-        </button>
+        <InputGroupItem>
+          <button onClick={addSuccessAlert} type="button" className={btnClasses}>
+            Add single success alert
+          </button>
+        </InputGroupItem>
+        <InputGroupItem>
+          <button onClick={addDangerAlert} type="button" className={btnClasses}>
+            Add single danger alert
+          </button>
+        </InputGroupItem>
+        <InputGroupItem>
+          <button onClick={addInfoAlert} type="button" className={btnClasses}>
+            Add single info alert
+          </button>
+        </InputGroupItem>
       </InputGroup>
       <AlertGroup isLiveRegion>
         {alerts.map(({ title, variant, key }) => (
diff --git a/packages/react-core/src/components/Alert/examples/AlertGroupSingularDynamicOverflow.tsx b/packages/react-core/src/components/Alert/examples/AlertGroupSingularDynamicOverflow.tsx
index 0ac8b045b90..a7597b23dbe 100644
--- a/packages/react-core/src/components/Alert/examples/AlertGroupSingularDynamicOverflow.tsx
+++ b/packages/react-core/src/components/Alert/examples/AlertGroupSingularDynamicOverflow.tsx
@@ -5,7 +5,8 @@ import {
   AlertGroup,
   AlertActionCloseButton,
   AlertVariant,
-  InputGroup
+  InputGroup,
+  InputGroupItem
 } from '@patternfly/react-core';
 
 export const AlertGroupSingularDynamicOverflow: React.FunctionComponent = () => {
@@ -57,15 +58,21 @@ export const AlertGroupSingularDynamicOverflow: React.FunctionComponent = () =>
   return (
     <React.Fragment>
       <InputGroup style={{ marginBottom: '16px' }}>
-        <button onClick={addSuccessAlert} type="button" className={btnClasses}>
-          Add single success alert
-        </button>
-        <button onClick={addDangerAlert} type="button" className={btnClasses}>
-          Add single danger alert
-        </button>
-        <button onClick={addInfoAlert} type="button" className={btnClasses}>
-          Add single info alert
-        </button>
+        <InputGroupItem>
+          <button onClick={addSuccessAlert} type="button" className={btnClasses}>
+            Add single success alert
+          </button>
+        </InputGroupItem>
+        <InputGroupItem>
+          <button onClick={addDangerAlert} type="button" className={btnClasses}>
+            Add single danger alert
+          </button>
+        </InputGroupItem>
+        <InputGroupItem>
+          <button onClick={addInfoAlert} type="button" className={btnClasses}>
+            Add single info alert
+          </button>
+        </InputGroupItem>
       </InputGroup>
       <AlertGroup isLiveRegion onOverflowClick={onOverflowClick} overflowMessage={overflowMessage}>
         {alerts.slice(0, maxDisplayed).map(({ key, variant, title }) => (
diff --git a/packages/react-core/src/components/Alert/examples/AlertGroupToast.tsx b/packages/react-core/src/components/Alert/examples/AlertGroupToast.tsx
index 59ce250fcc4..4df6acbf915 100644
--- a/packages/react-core/src/components/Alert/examples/AlertGroupToast.tsx
+++ b/packages/react-core/src/components/Alert/examples/AlertGroupToast.tsx
@@ -5,7 +5,8 @@ import {
   AlertGroup,
   AlertActionCloseButton,
   AlertVariant,
-  InputGroup
+  InputGroup,
+  InputGroupItem
 } from '@patternfly/react-core';
 
 export const AlertGroupToast: React.FunctionComponent = () => {
@@ -38,15 +39,21 @@ export const AlertGroupToast: React.FunctionComponent = () => {
   return (
     <React.Fragment>
       <InputGroup style={{ marginBottom: '16px' }}>
-        <button onClick={addSuccessAlert} type="button" className={btnClasses}>
-          Add toast success alert
-        </button>
-        <button onClick={addDangerAlert} type="button" className={btnClasses}>
-          Add toast danger alert
-        </button>
-        <button onClick={addInfoAlert} type="button" className={btnClasses}>
-          Add toast info alert
-        </button>
+        <InputGroupItem>
+          <button onClick={addSuccessAlert} type="button" className={btnClasses}>
+            Add toast success alert
+          </button>
+        </InputGroupItem>
+        <InputGroupItem>
+          <button onClick={addDangerAlert} type="button" className={btnClasses}>
+            Add toast danger alert
+          </button>
+        </InputGroupItem>
+        <InputGroupItem>
+          <button onClick={addInfoAlert} type="button" className={btnClasses}>
+            Add toast info alert
+          </button>
+        </InputGroupItem>
       </InputGroup>
       <AlertGroup isToast isLiveRegion>
         {alerts.map(({ key, variant, title }) => (
diff --git a/packages/react-core/src/components/Alert/examples/AlertGroupToastOverflowCapture.tsx b/packages/react-core/src/components/Alert/examples/AlertGroupToastOverflowCapture.tsx
index 2ea68546777..7e1beb8826c 100644
--- a/packages/react-core/src/components/Alert/examples/AlertGroupToastOverflowCapture.tsx
+++ b/packages/react-core/src/components/Alert/examples/AlertGroupToastOverflowCapture.tsx
@@ -5,7 +5,8 @@ import {
   AlertGroup,
   AlertActionCloseButton,
   AlertVariant,
-  InputGroup
+  InputGroup,
+  InputGroupItem
 } from '@patternfly/react-core';
 
 export const AlertGroupToastOverflowCapture: React.FunctionComponent = () => {
@@ -57,15 +58,21 @@ export const AlertGroupToastOverflowCapture: React.FunctionComponent = () => {
   return (
     <React.Fragment>
       <InputGroup style={{ marginBottom: '16px' }}>
-        <button onClick={addSuccessAlert} type="button" className={btnClasses}>
-          Add toast success alert
-        </button>
-        <button onClick={addDangerAlert} type="button" className={btnClasses}>
-          Add toast danger alert
-        </button>
-        <button onClick={addInfoAlert} type="button" className={btnClasses}>
-          Add toast info alert
-        </button>
+        <InputGroupItem>
+          <button onClick={addSuccessAlert} type="button" className={btnClasses}>
+            Add toast success alert
+          </button>
+        </InputGroupItem>
+        <InputGroupItem>
+          <button onClick={addDangerAlert} type="button" className={btnClasses}>
+            Add toast danger alert
+          </button>
+        </InputGroupItem>
+        <InputGroupItem>
+          <button onClick={addInfoAlert} type="button" className={btnClasses}>
+            Add toast info alert
+          </button>
+        </InputGroupItem>
       </InputGroup>
       <AlertGroup isToast isLiveRegion onOverflowClick={onOverflowClick} overflowMessage={overflowMessage}>
         {alerts.slice(0, maxDisplayed).map(({ key, variant, title }) => (
diff --git a/packages/react-core/src/components/CalendarMonth/CalendarMonth.tsx b/packages/react-core/src/components/CalendarMonth/CalendarMonth.tsx
index 33361b3f763..1a14fd9c15f 100644
--- a/packages/react-core/src/components/CalendarMonth/CalendarMonth.tsx
+++ b/packages/react-core/src/components/CalendarMonth/CalendarMonth.tsx
@@ -3,7 +3,7 @@ import { TextInput } from '../TextInput';
 import { Button } from '../Button';
 import { Select, SelectList, SelectOption } from '../Select';
 import { MenuToggle, MenuToggleElement } from '../MenuToggle';
-import { InputGroup } from '../InputGroup';
+import { InputGroup, InputGroupItem } from '../InputGroup';
 import AngleLeftIcon from '@patternfly/react-icons/dist/esm/icons/angle-left-icon';
 import AngleRightIcon from '@patternfly/react-icons/dist/esm/icons/angle-right-icon';
 import { css } from '@patternfly/react-styles';
@@ -259,67 +259,71 @@ export const CalendarMonth = ({
           </Button>
         </div>
         <InputGroup>
-          <div className={styles.calendarMonthHeaderMonth}>
-            <span id={hiddenMonthId} hidden>
-              Month
-            </span>
-            <Select
-              toggle={(toggleRef: React.Ref<MenuToggleElement>) => (
-                <MenuToggle
-                  ref={toggleRef}
-                  onClick={()=>setIsSelectOpen(!isSelectOpen)}
-                  isExpanded={isSelectOpen}
-                  style={{width: "140px"} as React.CSSProperties }
-                >
-                  {monthFormatted}
-                </MenuToggle>
-              )}
-              aria-labelledby={hiddenMonthId}
-              isOpen={isSelectOpen}
-              onOpenChange={(isOpen) => {
-                setIsSelectOpen(isOpen);
-                onSelectToggle(isOpen);
-              }}
-              onSelect={(ev, monthNum) => {
-                // When we put CalendarMonth in a Popover we want the Popover's onDocumentClick
-                // to see the SelectOption as a child so it doesn't close the Popover.
-                setTimeout(() => {
-                  setIsSelectOpen(false);
-                  onSelectToggle(false);
+          <InputGroupItem isFill>
+            <div className={styles.calendarMonthHeaderMonth}>
+              <span id={hiddenMonthId} hidden>
+                Month
+              </span>
+              <Select
+                toggle={(toggleRef: React.Ref<MenuToggleElement>) => (
+                  <MenuToggle
+                    ref={toggleRef}
+                    onClick={() => setIsSelectOpen(!isSelectOpen)}
+                    isExpanded={isSelectOpen}
+                    style={{ width: '140px' } as React.CSSProperties}
+                  >
+                    {monthFormatted}
+                  </MenuToggle>
+                )}
+                aria-labelledby={hiddenMonthId}
+                isOpen={isSelectOpen}
+                onOpenChange={(isOpen) => {
+                  setIsSelectOpen(isOpen);
+                  onSelectToggle(isOpen);
+                }}
+                onSelect={(ev, monthNum) => {
+                  // When we put CalendarMonth in a Popover we want the Popover's onDocumentClick
+                  // to see the SelectOption as a child so it doesn't close the Popover.
+                  setTimeout(() => {
+                    setIsSelectOpen(false);
+                    onSelectToggle(false);
+                    const newDate = new Date(focusedDate);
+                    newDate.setMonth(Number(monthNum as string));
+                    setFocusedDate(newDate);
+                    setHoveredDate(newDate);
+                    setShouldFocus(false);
+                    onMonthChange(ev, newDate);
+                  }, 0);
+                }}
+                selected={monthFormatted}
+              >
+                <SelectList>
+                  {longMonths.map((longMonth, index) => (
+                    <SelectOption key={index} itemId={index} isSelected={longMonth === monthFormatted}>
+                      {longMonth}
+                    </SelectOption>
+                  ))}
+                </SelectList>
+              </Select>
+            </div>
+          </InputGroupItem>
+          <InputGroupItem>
+            <div className={styles.calendarMonthHeaderYear}>
+              <TextInput
+                aria-label={yearInputAriaLabel}
+                type="number"
+                value={yearFormatted}
+                onChange={(ev: React.FormEvent<HTMLInputElement>, year: string) => {
                   const newDate = new Date(focusedDate);
-                  newDate.setMonth(Number(monthNum as string));
+                  newDate.setFullYear(+year);
                   setFocusedDate(newDate);
                   setHoveredDate(newDate);
                   setShouldFocus(false);
                   onMonthChange(ev, newDate);
-                }, 0);
-              }}
-              selected={monthFormatted}
-            >
-              <SelectList>
-                {longMonths.map((longMonth, index) => (
-                  <SelectOption key={index} itemId={index} isSelected={longMonth === monthFormatted}>
-                    {longMonth}
-                  </SelectOption>
-                ))}
-              </SelectList>
-            </Select>
-          </div>
-          <div className={styles.calendarMonthHeaderYear}>
-            <TextInput
-              aria-label={yearInputAriaLabel}
-              type="number"
-              value={yearFormatted}
-              onChange={(ev: React.FormEvent<HTMLInputElement>, year: string) => {
-                const newDate = new Date(focusedDate);
-                newDate.setFullYear(+year);
-                setFocusedDate(newDate);
-                setHoveredDate(newDate);
-                setShouldFocus(false);
-                onMonthChange(ev, newDate);
-              }}
-            />
-          </div>
+                }}
+              />
+            </div>
+          </InputGroupItem>
         </InputGroup>
         <div className={css(styles.calendarMonthHeaderNavControl, styles.modifiers.nextMonth)}>
           <Button
diff --git a/packages/react-core/src/components/DatePicker/DatePicker.tsx b/packages/react-core/src/components/DatePicker/DatePicker.tsx
index f34eb588ee3..59f810c0ab6 100644
--- a/packages/react-core/src/components/DatePicker/DatePicker.tsx
+++ b/packages/react-core/src/components/DatePicker/DatePicker.tsx
@@ -4,7 +4,7 @@ import styles from '@patternfly/react-styles/css/components/DatePicker/date-pick
 import buttonStyles from '@patternfly/react-styles/css/components/Button/button';
 import { TextInput, TextInputProps } from '../TextInput/TextInput';
 import { Popover, PopoverProps } from '../Popover/Popover';
-import { InputGroup } from '../InputGroup/InputGroup';
+import { InputGroup, InputGroupItem } from '../InputGroup';
 import OutlinedCalendarAltIcon from '@patternfly/react-icons/dist/esm/icons/outlined-calendar-alt-icon';
 import { CalendarMonth, CalendarFormat } from '../CalendarMonth';
 import { useImperativeHandle } from 'react';
@@ -248,28 +248,32 @@ const DatePickerBase = (
       >
         <div className={styles.datePickerInput} ref={triggerRef}>
           <InputGroup>
-            <TextInput
-              isDisabled={isDisabled}
-              aria-label={ariaLabel}
-              placeholder={placeholder}
-              validated={errorText.trim() ? 'error' : 'default'}
-              value={value}
-              onChange={onTextInput}
-              onBlur={onInputBlur}
-              onKeyPress={onKeyPress}
-              {...inputProps}
-            />
-            <button
-              ref={buttonRef}
-              // TODO: Removed style follow up work with issue #8457
-              className={css(buttonStyles.button, buttonStyles.modifiers.control)}
-              aria-label={buttonAriaLabel}
-              type="button"
-              onClick={() => setPopoverOpen(!popoverOpen)}
-              disabled={isDisabled}
-            >
-              <OutlinedCalendarAltIcon />
-            </button>
+            <InputGroupItem isFill>
+              <TextInput
+                isDisabled={isDisabled}
+                aria-label={ariaLabel}
+                placeholder={placeholder}
+                validated={errorText.trim() ? 'error' : 'default'}
+                value={value}
+                onChange={onTextInput}
+                onBlur={onInputBlur}
+                onKeyPress={onKeyPress}
+                {...inputProps}
+              />
+            </InputGroupItem>
+            <InputGroupItem>
+              <button
+                ref={buttonRef}
+                // TODO: Removed style follow up work with issue #8457
+                className={css(buttonStyles.button, buttonStyles.modifiers.control)}
+                aria-label={buttonAriaLabel}
+                type="button"
+                onClick={() => setPopoverOpen(!popoverOpen)}
+                disabled={isDisabled}
+              >
+                <OutlinedCalendarAltIcon />
+              </button>
+            </InputGroupItem>
           </InputGroup>
         </div>
       </Popover>
diff --git a/packages/react-core/src/components/DatePicker/__tests__/__snapshots__/DatePicker.test.tsx.snap b/packages/react-core/src/components/DatePicker/__tests__/__snapshots__/DatePicker.test.tsx.snap
index 1159611cf5f..70cb26056b6 100644
--- a/packages/react-core/src/components/DatePicker/__tests__/__snapshots__/DatePicker.test.tsx.snap
+++ b/packages/react-core/src/components/DatePicker/__tests__/__snapshots__/DatePicker.test.tsx.snap
@@ -12,34 +12,42 @@ exports[`With popover opened 1`] = `
       <div
         class="pf-v5-c-input-group"
       >
-        <input
-          aria-invalid="false"
-          aria-label="Date picker"
-          class="pf-v5-c-form-control"
-          data-ouia-component-id="OUIA-Generated-TextInputBase-4"
-          data-ouia-component-type="PF4/TextInput"
-          data-ouia-safe="true"
-          placeholder="YYYY-MM-DD"
-          type="text"
-          value=""
-        />
-        <button
-          aria-label="Toggle date picker"
-          class="pf-v5-c-button pf-m-control"
-          type="button"
+        <div
+          class="pf-v5-c-input-group__item pf-m-fill"
+        >
+          <input
+            aria-invalid="false"
+            aria-label="Date picker"
+            class="pf-v5-c-form-control"
+            data-ouia-component-id="OUIA-Generated-TextInputBase-4"
+            data-ouia-component-type="PF4/TextInput"
+            data-ouia-safe="true"
+            placeholder="YYYY-MM-DD"
+            type="text"
+            value=""
+          />
+        </div>
+        <div
+          class="pf-v5-c-input-group__item"
         >
-          <svg
-            aria-hidden="true"
-            class="pf-v5-svg"
-            fill="currentColor"
-            role="img"
-            viewBox="0 0 448 512"
+          <button
+            aria-label="Toggle date picker"
+            class="pf-v5-c-button pf-m-control"
+            type="button"
           >
-            <path
-              d="M148 288h-40c-6.6 0-12-5.4-12-12v-40c0-6.6 5.4-12 12-12h40c6.6 0 12 5.4 12 12v40c0 6.6-5.4 12-12 12zm108-12v-40c0-6.6-5.4-12-12-12h-40c-6.6 0-12 5.4-12 12v40c0 6.6 5.4 12 12 12h40c6.6 0 12-5.4 12-12zm96 0v-40c0-6.6-5.4-12-12-12h-40c-6.6 0-12 5.4-12 12v40c0 6.6 5.4 12 12 12h40c6.6 0 12-5.4 12-12zm-96 96v-40c0-6.6-5.4-12-12-12h-40c-6.6 0-12 5.4-12 12v40c0 6.6 5.4 12 12 12h40c6.6 0 12-5.4 12-12zm-96 0v-40c0-6.6-5.4-12-12-12h-40c-6.6 0-12 5.4-12 12v40c0 6.6 5.4 12 12 12h40c6.6 0 12-5.4 12-12zm192 0v-40c0-6.6-5.4-12-12-12h-40c-6.6 0-12 5.4-12 12v40c0 6.6 5.4 12 12 12h40c6.6 0 12-5.4 12-12zm96-260v352c0 26.5-21.5 48-48 48H48c-26.5 0-48-21.5-48-48V112c0-26.5 21.5-48 48-48h48V12c0-6.6 5.4-12 12-12h40c6.6 0 12 5.4 12 12v52h128V12c0-6.6 5.4-12 12-12h40c6.6 0 12 5.4 12 12v52h48c26.5 0 48 21.5 48 48zm-48 346V160H48v298c0 3.3 2.7 6 6 6h340c3.3 0 6-2.7 6-6z"
-            />
-          </svg>
-        </button>
+            <svg
+              aria-hidden="true"
+              class="pf-v5-svg"
+              fill="currentColor"
+              role="img"
+              viewBox="0 0 448 512"
+            >
+              <path
+                d="M148 288h-40c-6.6 0-12-5.4-12-12v-40c0-6.6 5.4-12 12-12h40c6.6 0 12 5.4 12 12v40c0 6.6-5.4 12-12 12zm108-12v-40c0-6.6-5.4-12-12-12h-40c-6.6 0-12 5.4-12 12v40c0 6.6 5.4 12 12 12h40c6.6 0 12-5.4 12-12zm96 0v-40c0-6.6-5.4-12-12-12h-40c-6.6 0-12 5.4-12 12v40c0 6.6 5.4 12 12 12h40c6.6 0 12-5.4 12-12zm-96 96v-40c0-6.6-5.4-12-12-12h-40c-6.6 0-12 5.4-12 12v40c0 6.6 5.4 12 12 12h40c6.6 0 12-5.4 12-12zm-96 0v-40c0-6.6-5.4-12-12-12h-40c-6.6 0-12 5.4-12 12v40c0 6.6 5.4 12 12 12h40c6.6 0 12-5.4 12-12zm192 0v-40c0-6.6-5.4-12-12-12h-40c-6.6 0-12 5.4-12 12v40c0 6.6 5.4 12 12 12h40c6.6 0 12-5.4 12-12zm96-260v352c0 26.5-21.5 48-48 48H48c-26.5 0-48-21.5-48-48V112c0-26.5 21.5-48 48-48h48V12c0-6.6 5.4-12 12-12h40c6.6 0 12 5.4 12 12v52h128V12c0-6.6 5.4-12 12-12h40c6.6 0 12 5.4 12 12v52h48c26.5 0 48 21.5 48 48zm-48 346V160H48v298c0 3.3 2.7 6 6 6h340c3.3 0 6-2.7 6-6z"
+              />
+            </svg>
+          </button>
+        </div>
       </div>
     </div>
     <div
@@ -95,61 +103,69 @@ exports[`With popover opened 1`] = `
                 class="pf-v5-c-input-group"
               >
                 <div
-                  class="pf-v5-c-calendar-month__header-month"
+                  class="pf-v5-c-input-group__item pf-m-fill"
                 >
-                  <span
-                    hidden=""
-                    id="unique_id_mock"
+                  <div
+                    class="pf-v5-c-calendar-month__header-month"
                   >
-                    Month
-                  </span>
-                  <div>
-                    <button
-                      aria-expanded="false"
-                      class="pf-v5-c-menu-toggle"
-                      style="width: 140px;"
-                      type="button"
+                    <span
+                      hidden=""
+                      id="unique_id_mock"
                     >
-                      <span
-                        class="pf-v5-c-menu-toggle__text"
-                      >
-                        December
-                      </span>
-                      <span
-                        class="pf-v5-c-menu-toggle__controls"
+                      Month
+                    </span>
+                    <div>
+                      <button
+                        aria-expanded="false"
+                        class="pf-v5-c-menu-toggle"
+                        style="width: 140px;"
+                        type="button"
                       >
                         <span
-                          class="pf-v5-c-menu-toggle__toggle-icon"
+                          class="pf-v5-c-menu-toggle__text"
                         >
-                          <svg
-                            aria-hidden="true"
-                            class="pf-v5-svg"
-                            fill="currentColor"
-                            role="img"
-                            viewBox="0 0 320 512"
+                          December
+                        </span>
+                        <span
+                          class="pf-v5-c-menu-toggle__controls"
+                        >
+                          <span
+                            class="pf-v5-c-menu-toggle__toggle-icon"
                           >
-                            <path
-                              d="M31.3 192h257.3c17.8 0 26.7 21.5 14.1 34.1L174.1 354.8c-7.8 7.8-20.5 7.8-28.3 0L17.2 226.1C4.6 213.5 13.5 192 31.3 192z"
-                            />
-                          </svg>
+                            <svg
+                              aria-hidden="true"
+                              class="pf-v5-svg"
+                              fill="currentColor"
+                              role="img"
+                              viewBox="0 0 320 512"
+                            >
+                              <path
+                                d="M31.3 192h257.3c17.8 0 26.7 21.5 14.1 34.1L174.1 354.8c-7.8 7.8-20.5 7.8-28.3 0L17.2 226.1C4.6 213.5 13.5 192 31.3 192z"
+                              />
+                            </svg>
+                          </span>
                         </span>
-                      </span>
-                    </button>
+                      </button>
+                    </div>
                   </div>
                 </div>
                 <div
-                  class="pf-v5-c-calendar-month__header-year"
+                  class="pf-v5-c-input-group__item"
                 >
-                  <input
-                    aria-invalid="false"
-                    aria-label="Select year"
-                    class="pf-v5-c-form-control"
-                    data-ouia-component-id="OUIA-Generated-TextInputBase-5"
-                    data-ouia-component-type="PF4/TextInput"
-                    data-ouia-safe="true"
-                    type="number"
-                    value="1969"
-                  />
+                  <div
+                    class="pf-v5-c-calendar-month__header-year"
+                  >
+                    <input
+                      aria-invalid="false"
+                      aria-label="Select year"
+                      class="pf-v5-c-form-control"
+                      data-ouia-component-id="OUIA-Generated-TextInputBase-5"
+                      data-ouia-component-type="PF4/TextInput"
+                      data-ouia-safe="true"
+                      type="number"
+                      value="1969"
+                    />
+                  </div>
                 </div>
               </div>
               <div
@@ -755,36 +771,44 @@ exports[`disabled date picker 1`] = `
       <div
         class="pf-v5-c-input-group"
       >
-        <input
-          aria-invalid="false"
-          aria-label="disabled date picker"
-          class="pf-v5-c-form-control"
-          data-ouia-component-id="OUIA-Generated-TextInputBase-1"
-          data-ouia-component-type="PF4/TextInput"
-          data-ouia-safe="true"
-          disabled=""
-          placeholder="YYYY-MM-DD"
-          type="text"
-          value="2020-11-20"
-        />
-        <button
-          aria-label="Toggle date picker"
-          class="pf-v5-c-button pf-m-control"
-          disabled=""
-          type="button"
+        <div
+          class="pf-v5-c-input-group__item pf-m-fill"
         >
-          <svg
-            aria-hidden="true"
-            class="pf-v5-svg"
-            fill="currentColor"
-            role="img"
-            viewBox="0 0 448 512"
+          <input
+            aria-invalid="false"
+            aria-label="disabled date picker"
+            class="pf-v5-c-form-control"
+            data-ouia-component-id="OUIA-Generated-TextInputBase-1"
+            data-ouia-component-type="PF4/TextInput"
+            data-ouia-safe="true"
+            disabled=""
+            placeholder="YYYY-MM-DD"
+            type="text"
+            value="2020-11-20"
+          />
+        </div>
+        <div
+          class="pf-v5-c-input-group__item"
+        >
+          <button
+            aria-label="Toggle date picker"
+            class="pf-v5-c-button pf-m-control"
+            disabled=""
+            type="button"
           >
-            <path
-              d="M148 288h-40c-6.6 0-12-5.4-12-12v-40c0-6.6 5.4-12 12-12h40c6.6 0 12 5.4 12 12v40c0 6.6-5.4 12-12 12zm108-12v-40c0-6.6-5.4-12-12-12h-40c-6.6 0-12 5.4-12 12v40c0 6.6 5.4 12 12 12h40c6.6 0 12-5.4 12-12zm96 0v-40c0-6.6-5.4-12-12-12h-40c-6.6 0-12 5.4-12 12v40c0 6.6 5.4 12 12 12h40c6.6 0 12-5.4 12-12zm-96 96v-40c0-6.6-5.4-12-12-12h-40c-6.6 0-12 5.4-12 12v40c0 6.6 5.4 12 12 12h40c6.6 0 12-5.4 12-12zm-96 0v-40c0-6.6-5.4-12-12-12h-40c-6.6 0-12 5.4-12 12v40c0 6.6 5.4 12 12 12h40c6.6 0 12-5.4 12-12zm192 0v-40c0-6.6-5.4-12-12-12h-40c-6.6 0-12 5.4-12 12v40c0 6.6 5.4 12 12 12h40c6.6 0 12-5.4 12-12zm96-260v352c0 26.5-21.5 48-48 48H48c-26.5 0-48-21.5-48-48V112c0-26.5 21.5-48 48-48h48V12c0-6.6 5.4-12 12-12h40c6.6 0 12 5.4 12 12v52h128V12c0-6.6 5.4-12 12-12h40c6.6 0 12 5.4 12 12v52h48c26.5 0 48 21.5 48 48zm-48 346V160H48v298c0 3.3 2.7 6 6 6h340c3.3 0 6-2.7 6-6z"
-            />
-          </svg>
-        </button>
+            <svg
+              aria-hidden="true"
+              class="pf-v5-svg"
+              fill="currentColor"
+              role="img"
+              viewBox="0 0 448 512"
+            >
+              <path
+                d="M148 288h-40c-6.6 0-12-5.4-12-12v-40c0-6.6 5.4-12 12-12h40c6.6 0 12 5.4 12 12v40c0 6.6-5.4 12-12 12zm108-12v-40c0-6.6-5.4-12-12-12h-40c-6.6 0-12 5.4-12 12v40c0 6.6 5.4 12 12 12h40c6.6 0 12-5.4 12-12zm96 0v-40c0-6.6-5.4-12-12-12h-40c-6.6 0-12 5.4-12 12v40c0 6.6 5.4 12 12 12h40c6.6 0 12-5.4 12-12zm-96 96v-40c0-6.6-5.4-12-12-12h-40c-6.6 0-12 5.4-12 12v40c0 6.6 5.4 12 12 12h40c6.6 0 12-5.4 12-12zm-96 0v-40c0-6.6-5.4-12-12-12h-40c-6.6 0-12 5.4-12 12v40c0 6.6 5.4 12 12 12h40c6.6 0 12-5.4 12-12zm192 0v-40c0-6.6-5.4-12-12-12h-40c-6.6 0-12 5.4-12 12v40c0 6.6 5.4 12 12 12h40c6.6 0 12-5.4 12-12zm96-260v352c0 26.5-21.5 48-48 48H48c-26.5 0-48-21.5-48-48V112c0-26.5 21.5-48 48-48h48V12c0-6.6 5.4-12 12-12h40c6.6 0 12 5.4 12 12v52h128V12c0-6.6 5.4-12 12-12h40c6.6 0 12 5.4 12 12v52h48c26.5 0 48 21.5 48 48zm-48 346V160H48v298c0 3.3 2.7 6 6 6h340c3.3 0 6-2.7 6-6z"
+              />
+            </svg>
+          </button>
+        </div>
       </div>
     </div>
   </div>
diff --git a/packages/react-core/src/components/FileUpload/FileUploadField.tsx b/packages/react-core/src/components/FileUpload/FileUploadField.tsx
index 6763ca9ad9e..13e673b9fd1 100644
--- a/packages/react-core/src/components/FileUpload/FileUploadField.tsx
+++ b/packages/react-core/src/components/FileUpload/FileUploadField.tsx
@@ -1,7 +1,7 @@
 import * as React from 'react';
 import styles from '@patternfly/react-styles/css/components/FileUpload/file-upload';
 import { css } from '@patternfly/react-styles';
-import { InputGroup } from '../InputGroup';
+import { InputGroup, InputGroupItem } from '../InputGroup';
 import { TextInput } from '../TextInput';
 import { Button, ButtonVariant } from '../Button';
 import { TextArea, TextAreResizeOrientation } from '../TextArea';
@@ -130,31 +130,37 @@ export const FileUploadField: React.FunctionComponent<FileUploadFieldProps> = ({
     >
       <div className={styles.fileUploadFileSelect}>
         <InputGroup>
-          <TextInput
-            isReadOnly // Always read-only regardless of isReadOnly prop (which is just for the TextArea)
-            isDisabled={isDisabled}
-            id={`${id}-filename`}
-            name={`${id}-filename`}
-            aria-label={filenameAriaLabel}
-            placeholder={filenamePlaceholder}
-            aria-describedby={`${id}-browse-button`}
-            value={filename}
-          />
-          <Button
-            id={`${id}-browse-button`}
-            variant={ButtonVariant.control}
-            onClick={onBrowseButtonClick}
-            isDisabled={isDisabled}
-          >
-            {browseButtonText}
-          </Button>
-          <Button
-            variant={ButtonVariant.control}
-            isDisabled={isDisabled || isClearButtonDisabled}
-            onClick={onClearButtonClick}
-          >
-            {clearButtonText}
-          </Button>
+          <InputGroupItem isFill>
+            <TextInput
+              isReadOnly // Always read-only regardless of isReadOnly prop (which is just for the TextArea)
+              isDisabled={isDisabled}
+              id={`${id}-filename`}
+              name={`${id}-filename`}
+              aria-label={filenameAriaLabel}
+              placeholder={filenamePlaceholder}
+              aria-describedby={`${id}-browse-button`}
+              value={filename}
+            />
+          </InputGroupItem>
+          <InputGroupItem>
+            <Button
+              id={`${id}-browse-button`}
+              variant={ButtonVariant.control}
+              onClick={onBrowseButtonClick}
+              isDisabled={isDisabled}
+            >
+              {browseButtonText}
+            </Button>
+          </InputGroupItem>
+          <InputGroupItem>
+            <Button
+              variant={ButtonVariant.control}
+              isDisabled={isDisabled || isClearButtonDisabled}
+              onClick={onClearButtonClick}
+            >
+              {clearButtonText}
+            </Button>
+          </InputGroupItem>
         </InputGroup>
       </div>
       <div className={styles.fileUploadFileDetails}>
diff --git a/packages/react-core/src/components/FileUpload/__tests__/__snapshots__/FileUpload.test.tsx.snap b/packages/react-core/src/components/FileUpload/__tests__/__snapshots__/FileUpload.test.tsx.snap
index 2f6a9699033..820d283acf9 100644
--- a/packages/react-core/src/components/FileUpload/__tests__/__snapshots__/FileUpload.test.tsx.snap
+++ b/packages/react-core/src/components/FileUpload/__tests__/__snapshots__/FileUpload.test.tsx.snap
@@ -12,43 +12,55 @@ exports[`simple fileupload 1`] = `
       <div
         class="pf-v5-c-input-group"
       >
-        <input
-          aria-describedby="simple-text-file-browse-button"
-          aria-invalid="false"
-          aria-label="Drag a file here or browse to upload"
-          class="pf-v5-c-form-control"
-          data-ouia-component-id="OUIA-Generated-TextInputBase-1"
-          data-ouia-component-type="PF4/TextInput"
-          data-ouia-safe="true"
-          id="simple-text-file-filename"
-          name="simple-text-file-filename"
-          placeholder="Drag a file here or browse to upload"
-          readonly=""
-          type="text"
-          value=""
-        />
-        <button
-          aria-disabled="false"
-          class="pf-v5-c-button pf-m-control"
-          data-ouia-component-id="OUIA-Generated-Button-control-1"
-          data-ouia-component-type="PF4/Button"
-          data-ouia-safe="true"
-          id="simple-text-file-browse-button"
-          type="button"
+        <div
+          class="pf-v5-c-input-group__item pf-m-fill"
         >
-          Browse...
-        </button>
-        <button
-          aria-disabled="true"
-          class="pf-v5-c-button pf-m-control pf-m-disabled"
-          data-ouia-component-id="OUIA-Generated-Button-control-2"
-          data-ouia-component-type="PF4/Button"
-          data-ouia-safe="true"
-          disabled=""
-          type="button"
+          <input
+            aria-describedby="simple-text-file-browse-button"
+            aria-invalid="false"
+            aria-label="Drag a file here or browse to upload"
+            class="pf-v5-c-form-control"
+            data-ouia-component-id="OUIA-Generated-TextInputBase-1"
+            data-ouia-component-type="PF4/TextInput"
+            data-ouia-safe="true"
+            id="simple-text-file-filename"
+            name="simple-text-file-filename"
+            placeholder="Drag a file here or browse to upload"
+            readonly=""
+            type="text"
+            value=""
+          />
+        </div>
+        <div
+          class="pf-v5-c-input-group__item"
         >
-          Clear
-        </button>
+          <button
+            aria-disabled="false"
+            class="pf-v5-c-button pf-m-control"
+            data-ouia-component-id="OUIA-Generated-Button-control-1"
+            data-ouia-component-type="PF4/Button"
+            data-ouia-safe="true"
+            id="simple-text-file-browse-button"
+            type="button"
+          >
+            Browse...
+          </button>
+        </div>
+        <div
+          class="pf-v5-c-input-group__item"
+        >
+          <button
+            aria-disabled="true"
+            class="pf-v5-c-button pf-m-control pf-m-disabled"
+            data-ouia-component-id="OUIA-Generated-Button-control-2"
+            data-ouia-component-type="PF4/Button"
+            data-ouia-safe="true"
+            disabled=""
+            type="button"
+          >
+            Clear
+          </button>
+        </div>
       </div>
     </div>
     <div
diff --git a/packages/react-core/src/components/FileUpload/__tests__/__snapshots__/FileUploadField.test.tsx.snap b/packages/react-core/src/components/FileUpload/__tests__/__snapshots__/FileUploadField.test.tsx.snap
index 718b817442e..da245dd44d1 100644
--- a/packages/react-core/src/components/FileUpload/__tests__/__snapshots__/FileUploadField.test.tsx.snap
+++ b/packages/react-core/src/components/FileUpload/__tests__/__snapshots__/FileUploadField.test.tsx.snap
@@ -11,42 +11,54 @@ exports[`simple fileuploadfield 1`] = `
       <div
         class="pf-v5-c-input-group"
       >
-        <input
-          aria-describedby="custom-file-upload-browse-button"
-          aria-invalid="false"
-          aria-label="Do something custom with this!"
-          class="pf-v5-c-form-control"
-          data-ouia-component-id="OUIA-Generated-TextInputBase-1"
-          data-ouia-component-type="PF4/TextInput"
-          data-ouia-safe="true"
-          id="custom-file-upload-filename"
-          name="custom-file-upload-filename"
-          placeholder="Do something custom with this!"
-          readonly=""
-          type="text"
-          value=""
-        />
-        <button
-          aria-disabled="false"
-          class="pf-v5-c-button pf-m-control"
-          data-ouia-component-id="OUIA-Generated-Button-control-1"
-          data-ouia-component-type="PF4/Button"
-          data-ouia-safe="true"
-          id="custom-file-upload-browse-button"
-          type="button"
+        <div
+          class="pf-v5-c-input-group__item pf-m-fill"
         >
-          Browse...
-        </button>
-        <button
-          aria-disabled="false"
-          class="pf-v5-c-button pf-m-control"
-          data-ouia-component-id="OUIA-Generated-Button-control-2"
-          data-ouia-component-type="PF4/Button"
-          data-ouia-safe="true"
-          type="button"
+          <input
+            aria-describedby="custom-file-upload-browse-button"
+            aria-invalid="false"
+            aria-label="Do something custom with this!"
+            class="pf-v5-c-form-control"
+            data-ouia-component-id="OUIA-Generated-TextInputBase-1"
+            data-ouia-component-type="PF4/TextInput"
+            data-ouia-safe="true"
+            id="custom-file-upload-filename"
+            name="custom-file-upload-filename"
+            placeholder="Do something custom with this!"
+            readonly=""
+            type="text"
+            value=""
+          />
+        </div>
+        <div
+          class="pf-v5-c-input-group__item"
         >
-          Clear
-        </button>
+          <button
+            aria-disabled="false"
+            class="pf-v5-c-button pf-m-control"
+            data-ouia-component-id="OUIA-Generated-Button-control-1"
+            data-ouia-component-type="PF4/Button"
+            data-ouia-safe="true"
+            id="custom-file-upload-browse-button"
+            type="button"
+          >
+            Browse...
+          </button>
+        </div>
+        <div
+          class="pf-v5-c-input-group__item"
+        >
+          <button
+            aria-disabled="false"
+            class="pf-v5-c-button pf-m-control"
+            data-ouia-component-id="OUIA-Generated-Button-control-2"
+            data-ouia-component-type="PF4/Button"
+            data-ouia-safe="true"
+            type="button"
+          >
+            Clear
+          </button>
+        </div>
       </div>
     </div>
     <div
diff --git a/packages/react-core/src/components/InputGroup/InputGroup.tsx b/packages/react-core/src/components/InputGroup/InputGroup.tsx
index 89ec0c470ac..0dd3c7bc27e 100644
--- a/packages/react-core/src/components/InputGroup/InputGroup.tsx
+++ b/packages/react-core/src/components/InputGroup/InputGroup.tsx
@@ -20,25 +20,61 @@ export const InputGroupBase: React.FunctionComponent<InputGroupProps> = ({
   innerRef,
   ...props
 }: InputGroupProps) => {
-  const formCtrls = [FormSelect, TextArea, TextInput].map((comp) => comp.displayName);
-  const idItem = React.Children.toArray(children).find(
-    (child: any) => !formCtrls.includes(child.type.displayName) && child.props.id
-  ) as React.ReactElement<{ id: string }>;
-
+  const getIdItem = () => {
+    const getChildId = (_children: any) =>
+      React.Children.toArray(_children).find(
+        (_child: any) => !formCtrls.includes(_child?.type?.displayName) && _child?.props?.id
+      );
+    let childId = getChildId(children);
+    if (childId) {
+      return childId;
+    }
+    React.Children.toArray(children).find((child: any) => {
+      const _childId = getChildId(child.props.children);
+      if (_childId) {
+        childId = _childId;
+        return true;
+      }
+    });
+    return childId;
+  };
+  const formCtrls = [FormSelect, TextArea, TextInput].map(comp => comp.displayName);
+  const idItem = getIdItem() as React.ReactElement<{ id: string }>;
   const ref = React.useRef(null);
   const inputGroupRef = innerRef || ref;
 
+  const childrenWithId = React.Children.map(children, (child: any) => {
+    if (child?.type.displayName === 'InputGroupItem') {
+      const newChildren = React.Children.map(child.props.children, _child => {
+        if (!_child.props) {
+          return _child;
+        }
+        if (_child.props['aria-describedby']) {
+          return _child;
+        }
+        if (!formCtrls.includes(_child.type.displayName)) {
+          return _child;
+        }
+        return React.cloneElement(_child, {
+          'aria-describedby': _child.props['aria-describedby'] === '' ? undefined : idItem?.props?.id
+        });
+      });
+      return React.cloneElement(child, {}, newChildren);
+    }
+
+    if (child?.props['aria-describedby']) {
+      return child;
+    }
+    if (!formCtrls.includes(child?.type.displayName)) {
+      return child;
+    }
+    return React.cloneElement(child, {
+      'aria-describedby': child.props['aria-describedby'] === '' ? undefined : idItem?.props?.id
+    });
+  });
   return (
     <div ref={inputGroupRef} className={css(styles.inputGroup, className)} {...props}>
-      {idItem
-        ? React.Children.map(children, (child: any) =>
-            !formCtrls.includes(child.type.displayName) || child.props['aria-describedby']
-              ? child
-              : React.cloneElement(child, {
-                  'aria-describedby': child.props['aria-describedby'] === '' ? undefined : idItem.props.id
-                })
-          )
-        : children}
+      {idItem ? childrenWithId : children}
     </div>
   );
 };
diff --git a/packages/react-core/src/components/InputGroup/InputGroupItem.tsx b/packages/react-core/src/components/InputGroup/InputGroupItem.tsx
new file mode 100644
index 00000000000..f3d4ebb205c
--- /dev/null
+++ b/packages/react-core/src/components/InputGroup/InputGroupItem.tsx
@@ -0,0 +1,44 @@
+import * as React from 'react';
+import styles from '@patternfly/react-styles/css/components/InputGroup/input-group';
+import { css } from '@patternfly/react-styles';
+
+export interface InputGroupItemProps extends React.HTMLProps<HTMLDivElement> {
+  /** Additional classes added to the input group item. */
+  className?: string;
+  /** Content rendered inside the input group item. */
+  children: React.ReactNode;
+  /** Enables box styling to the input group item */
+  isBox?: boolean;
+  /** Flag to indicate if the input group item is plain. */
+  isPlain?: boolean;
+  /** Flag to indicate if the input group item should fill the available horizontal space */
+  isFill?: boolean;
+  /** Flag to indicate if the input group item is disabled. */
+  isDisabled?: boolean;
+
+}
+
+export const InputGroupItem: React.FunctionComponent<InputGroupItemProps> = ({
+  className = '',
+  children,
+  isFill = false,
+  isBox = false,
+  isPlain,
+  isDisabled,
+  ...props
+}: InputGroupItemProps) => (
+  <div
+    className={css(
+      styles.inputGroupItem,
+      isFill && styles.modifiers.fill,
+      isBox && styles.modifiers.box,
+      isPlain && styles.modifiers.plain,
+      isDisabled && styles.modifiers.disabled,
+      className
+    )}
+    {...props}
+  >
+    {children}
+  </div>
+);
+InputGroupItem.displayName = 'InputGroupItem';
diff --git a/packages/react-core/src/components/InputGroup/__tests__/InputGroup.test.tsx b/packages/react-core/src/components/InputGroup/__tests__/InputGroup.test.tsx
index d91a03091fd..cca2d2bf250 100644
--- a/packages/react-core/src/components/InputGroup/__tests__/InputGroup.test.tsx
+++ b/packages/react-core/src/components/InputGroup/__tests__/InputGroup.test.tsx
@@ -3,6 +3,7 @@ import React from 'react';
 import { render, screen } from '@testing-library/react';
 
 import { InputGroup } from '../InputGroup';
+import { InputGroupItem } from '../InputGroupItem';
 import { Button } from '../../Button';
 import { TextInput } from '../../TextInput';
 
@@ -12,10 +13,14 @@ describe('InputGroup', () => {
     // If Button has an id props, this should be used in aria-describedby.
     render(
       <InputGroup>
-        <TextInput value="some data" aria-label="some text" />
-        <Button variant="primary" id="button-id">
-          hello
-        </Button>
+        <InputGroupItem>
+          <TextInput value="some data" aria-label="some text" />
+        </InputGroupItem>
+        <InputGroupItem>
+          <Button variant="primary" id="button-id">
+            hello
+          </Button>
+        </InputGroupItem>
       </InputGroup>
     );
     expect(screen.getByLabelText('some text')).toHaveAttribute('aria-describedby', 'button-id');
@@ -27,10 +32,14 @@ describe('InputGroup', () => {
     // example has an empty aria-describedby to prevent that from happening.
     render(
       <InputGroup>
-        <TextInput value="some data" aria-describedby="" aria-label="some text" />
-        <Button id="button-id">
-          hello
-        </Button>
+        <InputGroupItem>
+          <TextInput value="some data" aria-describedby="" aria-label="some text" />
+        </InputGroupItem>
+        <InputGroupItem>
+          <Button id="button-id">
+            hello
+          </Button>
+        </InputGroupItem>
       </InputGroup>
     );
     expect(screen.getByLabelText('some text')).not.toHaveAttribute('aria-describedby');
@@ -42,10 +51,14 @@ describe('InputGroup', () => {
     // example has a predefined aria-describedby to prevent that from happening
     render(
       <InputGroup>
-        <TextInput value="some data" aria-describedby="myself" aria-label="some text" />
-        <Button id="button-id">
-          hello
-        </Button>
+        <InputGroupItem>
+          <TextInput value="some data" aria-describedby="myself" aria-label="some text" />
+        </InputGroupItem>
+        <InputGroupItem>
+          <Button id="button-id">
+            hello
+          </Button>
+        </InputGroupItem>
       </InputGroup>
     );
     expect(screen.getByLabelText('some text')).toHaveAttribute('aria-describedby', 'myself');
diff --git a/packages/react-core/src/components/InputGroup/examples/InputGroup.md b/packages/react-core/src/components/InputGroup/examples/InputGroup.md
index 51a1bb722fc..5095fe18168 100644
--- a/packages/react-core/src/components/InputGroup/examples/InputGroup.md
+++ b/packages/react-core/src/components/InputGroup/examples/InputGroup.md
@@ -2,7 +2,7 @@
 id: Input group
 section: components
 cssPrefix: null
-propComponents: ['InputGroup', 'InputGroupText']
+propComponents: ['InputGroup', 'InputGroupItem', 'InputGroupText']
 ---
 
 import AtIcon from '@patternfly/react-icons/dist/esm/icons/at-icon';
@@ -32,6 +32,7 @@ import QuestionCircleIcon from '@patternfly/react-icons/dist/esm/icons/question-
 
 ### With popover
 
+using `appendTo` with ref to the `InputGroup` for the Popover so that the popover width will depend on the whole input group
 ```ts file ='./InputGroupWithPopover.tsx'
 
 ```
diff --git a/packages/react-core/src/components/InputGroup/examples/InputGroupBasic.tsx b/packages/react-core/src/components/InputGroup/examples/InputGroupBasic.tsx
index 83781408052..71a9264bfcd 100644
--- a/packages/react-core/src/components/InputGroup/examples/InputGroupBasic.tsx
+++ b/packages/react-core/src/components/InputGroup/examples/InputGroupBasic.tsx
@@ -1,31 +1,50 @@
 import React from 'react';
 import AtIcon from '@patternfly/react-icons/dist/esm/icons/at-icon';
-import { InputGroup, InputGroupText, InputGroupTextVariant, TextInput, ValidatedOptions } from '@patternfly/react-core';
+import {
+  InputGroup,
+  InputGroupText,
+  InputGroupItem,
+  InputGroupTextVariant,
+  TextInput,
+  ValidatedOptions
+} from '@patternfly/react-core';
 
 export const InputGroupBasic: React.FunctionComponent = () => (
   <React.Fragment>
     <InputGroup>
-      <TextInput id="textInput-basic-1" type="email" aria-label="email input field" />
-      <InputGroupText id="email-example">@example.com</InputGroupText>
+      <InputGroupItem isFill>
+        <TextInput id="textInput-basic-1" type="email" aria-label="email input field" />
+      </InputGroupItem>
+      <InputGroupItem isBox>
+        <InputGroupText id="email-example">@example.com</InputGroupText>
+      </InputGroupItem>
     </InputGroup>
     <br />
     <InputGroup>
-      <InputGroupText id="username">
-        <AtIcon />
-      </InputGroupText>
-      <TextInput
-        validated={ValidatedOptions.error}
-        id="textInput-basic-2"
-        type="email"
-        aria-label="Error state username example"
-      />
+      <InputGroupItem isBox>
+        <InputGroupText id="username">
+          <AtIcon />
+        </InputGroupText>
+      </InputGroupItem>
+      <InputGroupItem isFill>
+        <TextInput
+          validated={ValidatedOptions.error}
+          id="textInput-basic-2"
+          type="email"
+          aria-label="Error state username example"
+        />
+      </InputGroupItem>
     </InputGroup>
     <br />
     <InputGroup>
-      <TextInput name="textInput-basic-3" id="textInput-basic-3" type="text" aria-label="percentage" />
-      <InputGroupText id="plain-example" variant={InputGroupTextVariant.plain}>
-        %
-      </InputGroupText>
+      <InputGroupItem isFill>
+        <TextInput name="textInput-basic-3" id="textInput-basic-3" type="text" aria-label="percentage" />
+      </InputGroupItem>
+      <InputGroupItem isPlain isBox>
+        <InputGroupText id="plain-example" variant={InputGroupTextVariant.plain}>
+          %
+        </InputGroupText>
+      </InputGroupItem>
     </InputGroup>
   </React.Fragment>
 );
diff --git a/packages/react-core/src/components/InputGroup/examples/InputGroupWithDropdown.tsx b/packages/react-core/src/components/InputGroup/examples/InputGroupWithDropdown.tsx
index 1e0e6ebb67b..87acc8e9168 100644
--- a/packages/react-core/src/components/InputGroup/examples/InputGroupWithDropdown.tsx
+++ b/packages/react-core/src/components/InputGroup/examples/InputGroupWithDropdown.tsx
@@ -2,6 +2,7 @@ import React from 'react';
 import {
   Button,
   InputGroup,
+  InputGroupItem,
   TextInput,
   Dropdown,
   DropdownList,
@@ -24,32 +25,38 @@ export const InputGroupWithDropdown: React.FunctionComponent = () => {
   return (
     <React.Fragment>
       <InputGroup>
-        <Dropdown
-          isOpen={isOpen}
-          onSelect={onSelect}
-          onOpenChange={(isOpen: boolean) => setIsOpen(isOpen)}
-          toggle={(toggleRef: React.Ref<MenuToggleElement>) => (
-            <MenuToggle ref={toggleRef} onClick={onToggle} isExpanded={isOpen}>
-              Dropdown
-            </MenuToggle>
-          )}
-        >
-          <DropdownList>
-            <DropdownItem itemId={0} key="option1">
-              Option 1
-            </DropdownItem>
-            <DropdownItem itemId={1} key="option2">
-              Option 2
-            </DropdownItem>
-            <DropdownItem itemId={2} key="option3">
-              Option 3
-            </DropdownItem>
-          </DropdownList>
-        </Dropdown>
-        <TextInput id="textInput-with-dropdown" aria-label="input with dropdown and button" />
-        <Button id="inputDropdownButton1" variant="control">
-          Button
-        </Button>
+        <InputGroupItem>
+          <Dropdown
+            isOpen={isOpen}
+            onSelect={onSelect}
+            onOpenChange={(isOpen: boolean) => setIsOpen(isOpen)}
+            toggle={(toggleRef: React.Ref<MenuToggleElement>) => (
+              <MenuToggle ref={toggleRef} onClick={onToggle} isExpanded={isOpen}>
+                Dropdown
+              </MenuToggle>
+            )}
+          >
+            <DropdownList>
+              <DropdownItem itemId={0} key="option1">
+                Option 1
+              </DropdownItem>
+              <DropdownItem itemId={1} key="option2">
+                Option 2
+              </DropdownItem>
+              <DropdownItem itemId={2} key="option3">
+                Option 3
+              </DropdownItem>
+            </DropdownList>
+          </Dropdown>
+        </InputGroupItem>
+        <InputGroupItem isFill>
+          <TextInput id="textInput-with-dropdown" aria-label="input with dropdown and button" />
+        </InputGroupItem>
+        <InputGroupItem>
+          <Button id="inputDropdownButton1" variant="control">
+            Button
+          </Button>
+        </InputGroupItem>
       </InputGroup>
     </React.Fragment>
   );
diff --git a/packages/react-core/src/components/InputGroup/examples/InputGroupWithPopover.tsx b/packages/react-core/src/components/InputGroup/examples/InputGroupWithPopover.tsx
index 9792812849f..5af8d261e6b 100644
--- a/packages/react-core/src/components/InputGroup/examples/InputGroupWithPopover.tsx
+++ b/packages/react-core/src/components/InputGroup/examples/InputGroupWithPopover.tsx
@@ -1,43 +1,57 @@
 import React from 'react';
 import QuestionCircleIcon from '@patternfly/react-icons/dist/esm/icons/question-circle-icon';
-import { Button, InputGroup, TextInput, Popover, PopoverPosition } from '@patternfly/react-core';
+import { Button, InputGroup, InputGroupItem, TextInput, Popover, PopoverPosition } from '@patternfly/react-core';
 
-export const InputGroupWithPopover: React.FunctionComponent = () => (
-  <React.Fragment>
-    <InputGroup>
-      <TextInput
-        name="textInput-with-popover-1"
-        id="textInput-with-popover-1"
-        type="text"
-        aria-label="first input example with popover"
-      />
-      <Popover
-        aria-label="popover example"
-        position={PopoverPosition.top}
-        bodyContent="This field is an example of an input group with a popover."
-      >
-        <Button variant="control" aria-label="popover for input">
-          <QuestionCircleIcon />
-        </Button>
-      </Popover>
-    </InputGroup>
-    <br />
-    <InputGroup>
-      <TextInput
-        name="textInput-with-popover-2"
-        id="textInput-with-popover-2"
-        type="text"
-        aria-label="second input example with popover"
-      />
-      <Popover
-        aria-label="popover example"
-        position={PopoverPosition.top}
-        bodyContent="This field is an example of an input group with a popover."
-      >
-        <Button variant="plain" aria-label="Popover for input">
-          <QuestionCircleIcon />
-        </Button>
-      </Popover>
-    </InputGroup>
-  </React.Fragment>
-);
+export const InputGroupWithPopover: React.FunctionComponent = () => {
+  const inputGroupRef1 = React.useRef(null);
+  const inputGroupRef2 = React.useRef(null);
+  return (
+    <React.Fragment>
+      <InputGroup ref={inputGroupRef1}>
+        <InputGroupItem isFill>
+          <TextInput
+            name="textInput-with-popover-1"
+            id="textInput-with-popover-1"
+            type="text"
+            aria-label="first input example with popover"
+          />
+        </InputGroupItem>
+        <InputGroupItem>
+          <Popover
+            aria-label="popover example"
+            position={PopoverPosition.top}
+            bodyContent="This field is an example of an input group with a popover."
+            appendTo={() => inputGroupRef1.current}
+          >
+            <Button variant="control" aria-label="popover for input">
+              <QuestionCircleIcon />
+            </Button>
+          </Popover>
+        </InputGroupItem>
+      </InputGroup>
+      <br />
+      <InputGroup ref={inputGroupRef2}>
+        <InputGroupItem isFill>
+          <TextInput
+            name="textInput-with-popover-2"
+            id="textInput-with-popover-2"
+            type="text"
+            aria-label="second input example with popover"
+          />
+        </InputGroupItem>
+        <InputGroupItem>
+          <Popover
+            aria-label="popover example"
+            position={PopoverPosition.top}
+            bodyContent="This field is an example of an input group with a popover."
+            appendTo={() => inputGroupRef2.current}
+          >
+            <Button variant="plain" aria-label="Popover for input">
+              <QuestionCircleIcon />
+            </Button>
+          </Popover>
+        </InputGroupItem>
+      </InputGroup>
+    </React.Fragment>
+  );
+};
diff --git a/packages/react-core/src/components/InputGroup/examples/InputGroupWithSiblings.tsx b/packages/react-core/src/components/InputGroup/examples/InputGroupWithSiblings.tsx
index 7b9ebad0ee1..213d19c2bef 100644
--- a/packages/react-core/src/components/InputGroup/examples/InputGroupWithSiblings.tsx
+++ b/packages/react-core/src/components/InputGroup/examples/InputGroupWithSiblings.tsx
@@ -1,37 +1,72 @@
 import React from 'react';
 import DollarSignIcon from '@patternfly/react-icons/dist/esm/icons/dollar-sign-icon';
-import { Button, TextArea, InputGroup, InputGroupText, TextInput } from '@patternfly/react-core';
+import {
+  Button,
+  TextArea,
+  InputGroup,
+  InputGroupText,
+  InputGroupItem,
+  TextInput,
+} from '@patternfly/react-core';
 
 export const InputGroupWithSiblings: React.FunctionComponent = () => (
   <React.Fragment>
     <InputGroup>
-      <Button id="textAreaButton1" variant="control">
-        Button
-      </Button>
-      <TextArea name="textarea1" id="textarea1" aria-label="textarea with buttons" />
-      <Button variant="control">Button</Button>
+      <InputGroupItem>
+        <Button id="textAreaButton1" variant="control">
+          Button
+        </Button>
+      </InputGroupItem>
+      <InputGroupItem isFill>
+        <TextArea
+          name="textarea1"
+          id="textarea1"
+          aria-label="textarea with buttons"
+        />
+      </InputGroupItem>
+      <InputGroupItem>
+        <Button variant="control">Button</Button>
+      </InputGroupItem>
     </InputGroup>
     <br />
     <InputGroup>
-      <Button id="textAreaButton3" variant="control">
-        Button
-      </Button>
-      <Button variant="control">Button</Button>
-      <TextArea name="textarea2" id="textarea2" aria-label="textarea with 3 buttons" />
-      <Button variant="control">Button</Button>
+      <InputGroupItem>
+        <Button id="textAreaButton3" variant="control">
+          Button
+        </Button>
+      </InputGroupItem>
+      <InputGroupItem>
+        <Button variant="control">Button</Button>
+      </InputGroupItem>
+      <InputGroupItem isFill>
+        <TextArea
+          name="textarea2"
+          id="textarea2"
+          aria-label="textarea with 3 buttons"
+        />
+      </InputGroupItem>
+      <InputGroupItem>
+        <Button variant="control">Button</Button>
+      </InputGroupItem>
     </InputGroup>
     <br />
     <InputGroup>
-      <InputGroupText>
-        <DollarSignIcon />
-      </InputGroupText>
-      <TextInput
-        id="textInput-with-siblings"
-        name="textInput-with-siblings"
-        type="number"
-        aria-label="Dollar amount input example"
-      />
-      <InputGroupText>.00</InputGroupText>
+      <InputGroupItem isBox>
+        <InputGroupText>
+          <DollarSignIcon />
+        </InputGroupText>
+      </InputGroupItem>
+      <InputGroupItem isFill>
+        <TextInput
+          id="textInput-with-siblings"
+          name="textInput-with-siblings"
+          type="number"
+          aria-label="Dollar amount input example"
+        />
+      </InputGroupItem>
+      <InputGroupItem isBox>
+        <InputGroupText>.00</InputGroupText>
+      </InputGroupItem>
     </InputGroup>
   </React.Fragment>
 );
diff --git a/packages/react-core/src/components/InputGroup/examples/InputGroupWithTextarea.tsx b/packages/react-core/src/components/InputGroup/examples/InputGroupWithTextarea.tsx
index 0b5dc0fbdce..a1233b0b3da 100644
--- a/packages/react-core/src/components/InputGroup/examples/InputGroupWithTextarea.tsx
+++ b/packages/react-core/src/components/InputGroup/examples/InputGroupWithTextarea.tsx
@@ -1,13 +1,17 @@
 import React from 'react';
-import { Button, TextArea, InputGroup } from '@patternfly/react-core';
+import { Button, TextArea, InputGroup, InputGroupItem } from '@patternfly/react-core';
 
 export const InputGroupWithTextarea: React.FunctionComponent = () => (
   <React.Fragment>
     <InputGroup>
-      <TextArea name="inputGroup-with-textarea" id="inputGroup-with-textarea" aria-label="textarea with button" />
-      <Button id="textAreaButton2" variant="control">
-        Button
-      </Button>
+      <InputGroupItem isFill>
+        <TextArea name="inputGroup-with-textarea" id="inputGroup-with-textarea" aria-label="textarea with button" />
+      </InputGroupItem>
+      <InputGroupItem>
+        <Button id="textAreaButton2" variant="control">
+          Button
+        </Button>
+      </InputGroupItem>
     </InputGroup>
   </React.Fragment>
 );
diff --git a/packages/react-core/src/components/InputGroup/index.ts b/packages/react-core/src/components/InputGroup/index.ts
index 187d29e64b0..a14b2b665db 100644
--- a/packages/react-core/src/components/InputGroup/index.ts
+++ b/packages/react-core/src/components/InputGroup/index.ts
@@ -1,2 +1,3 @@
 export * from './InputGroup';
 export * from './InputGroupText';
+export * from './InputGroupItem';
diff --git a/packages/react-core/src/components/LoginPage/LoginForm.tsx b/packages/react-core/src/components/LoginPage/LoginForm.tsx
index a014682ffb4..c1c06385cba 100644
--- a/packages/react-core/src/components/LoginPage/LoginForm.tsx
+++ b/packages/react-core/src/components/LoginPage/LoginForm.tsx
@@ -4,7 +4,7 @@ import { TextInput } from '../TextInput';
 import { Button } from '../Button';
 import { Checkbox } from '../Checkbox';
 import { ValidatedOptions } from '../../helpers/constants';
-import { InputGroup } from '../InputGroup';
+import { InputGroup, InputGroupItem } from '../InputGroup';
 import EyeSlashIcon from '@patternfly/react-icons/dist/esm/icons/eye-slash-icon';
 import EyeIcon from '@patternfly/react-icons/dist/esm/icons/eye-icon';
 import { HelperText, HelperTextItem } from '../HelperText';
@@ -121,14 +121,18 @@ export const LoginForm: React.FunctionComponent<LoginFormProps> = ({
       <FormGroup label={passwordLabel} isRequired fieldId="pf-login-password-id">
         {isShowPasswordEnabled && (
           <InputGroup>
-            {passwordInput}
-            <Button
-              variant="control"
-              onClick={() => setPasswordHidden(!passwordHidden)}
-              aria-label={passwordHidden ? showPasswordAriaLabel : hidePasswordAriaLabel}
-            >
-              {passwordHidden ? <EyeIcon /> : <EyeSlashIcon />}
-            </Button>
+            <InputGroupItem isFill>
+              {passwordInput}
+            </InputGroupItem>
+            <InputGroupItem>
+              <Button
+                variant="control"
+                onClick={() => setPasswordHidden(!passwordHidden)}
+                aria-label={passwordHidden ? showPasswordAriaLabel : hidePasswordAriaLabel}
+              >
+                {passwordHidden ? <EyeIcon /> : <EyeSlashIcon />}
+              </Button>
+            </InputGroupItem>
           </InputGroup>
         )}
         {!isShowPasswordEnabled && passwordInput}
diff --git a/packages/react-core/src/components/LoginPage/__tests__/__snapshots__/LoginForm.test.tsx.snap b/packages/react-core/src/components/LoginPage/__tests__/__snapshots__/LoginForm.test.tsx.snap
index 74188b56668..92062845ebd 100644
--- a/packages/react-core/src/components/LoginPage/__tests__/__snapshots__/LoginForm.test.tsx.snap
+++ b/packages/react-core/src/components/LoginPage/__tests__/__snapshots__/LoginForm.test.tsx.snap
@@ -218,39 +218,47 @@ exports[`LoginForm LoginForm with show password 1`] = `
         <div
           class="pf-v5-c-input-group"
         >
-          <input
-            aria-invalid="false"
-            class="pf-v5-c-form-control"
-            data-ouia-component-id="OUIA-Generated-TextInputBase-12"
-            data-ouia-component-type="PF4/TextInput"
-            data-ouia-safe="true"
-            id="pf-login-password-id"
-            name="pf-login-password-id"
-            required=""
-            type="password"
-            value=""
-          />
-          <button
-            aria-disabled="false"
-            aria-label="Show password"
-            class="pf-v5-c-button pf-m-control"
-            data-ouia-component-id="OUIA-Generated-Button-control-1"
-            data-ouia-component-type="PF4/Button"
-            data-ouia-safe="true"
-            type="button"
+          <div
+            class="pf-v5-c-input-group__item pf-m-fill"
           >
-            <svg
-              aria-hidden="true"
-              class="pf-v5-svg"
-              fill="currentColor"
-              role="img"
-              viewBox="0 0 576 512"
+            <input
+              aria-invalid="false"
+              class="pf-v5-c-form-control"
+              data-ouia-component-id="OUIA-Generated-TextInputBase-12"
+              data-ouia-component-type="PF4/TextInput"
+              data-ouia-safe="true"
+              id="pf-login-password-id"
+              name="pf-login-password-id"
+              required=""
+              type="password"
+              value=""
+            />
+          </div>
+          <div
+            class="pf-v5-c-input-group__item"
+          >
+            <button
+              aria-disabled="false"
+              aria-label="Show password"
+              class="pf-v5-c-button pf-m-control"
+              data-ouia-component-id="OUIA-Generated-Button-control-1"
+              data-ouia-component-type="PF4/Button"
+              data-ouia-safe="true"
+              type="button"
             >
-              <path
-                d="M572.52 241.4C518.29 135.59 410.93 64 288 64S57.68 135.64 3.48 241.41a32.35 32.35 0 0 0 0 29.19C57.71 376.41 165.07 448 288 448s230.32-71.64 284.52-177.41a32.35 32.35 0 0 0 0-29.19zM288 400a144 144 0 1 1 144-144 143.93 143.93 0 0 1-144 144zm0-240a95.31 95.31 0 0 0-25.31 3.79 47.85 47.85 0 0 1-66.9 66.9A95.78 95.78 0 1 0 288 160z"
-              />
-            </svg>
-          </button>
+              <svg
+                aria-hidden="true"
+                class="pf-v5-svg"
+                fill="currentColor"
+                role="img"
+                viewBox="0 0 576 512"
+              >
+                <path
+                  d="M572.52 241.4C518.29 135.59 410.93 64 288 64S57.68 135.64 3.48 241.41a32.35 32.35 0 0 0 0 29.19C57.71 376.41 165.07 448 288 448s230.32-71.64 284.52-177.41a32.35 32.35 0 0 0 0-29.19zM288 400a144 144 0 1 1 144-144 143.93 143.93 0 0 1-144 144zm0-240a95.31 95.31 0 0 0-25.31 3.79 47.85 47.85 0 0 1-66.9 66.9A95.78 95.78 0 1 0 288 160z"
+                />
+              </svg>
+            </button>
+          </div>
         </div>
       </div>
     </div>
diff --git a/packages/react-core/src/components/NumberInput/NumberInput.tsx b/packages/react-core/src/components/NumberInput/NumberInput.tsx
index b04fece8a4c..84ccd70a307 100644
--- a/packages/react-core/src/components/NumberInput/NumberInput.tsx
+++ b/packages/react-core/src/components/NumberInput/NumberInput.tsx
@@ -3,7 +3,7 @@ import styles from '@patternfly/react-styles/css/components/NumberInput/number-i
 import { css } from '@patternfly/react-styles';
 import MinusIcon from '@patternfly/react-icons/dist/esm/icons/minus-icon';
 import PlusIcon from '@patternfly/react-icons/dist/esm/icons/plus-icon';
-import { InputGroup } from '../InputGroup';
+import { InputGroup, InputGroupItem } from '../InputGroup';
 import { Button, ButtonProps } from '../Button';
 import { KeyTypes, ValidatedOptions } from '../../helpers';
 import { TextInput } from '../TextInput';
@@ -116,41 +116,47 @@ export const NumberInput: React.FunctionComponent<NumberInputProps> = ({
     >
       {unit && unitPosition === 'before' && numberInputUnit}
       <InputGroup>
-        <Button
-          variant="control"
-          aria-label={minusBtnAriaLabel}
-          isDisabled={isDisabled || value <= min}
-          onClick={(evt) => onMinus(evt, inputName)}
-          {...minusBtnProps}
-        >
-          <span className={css(styles.numberInputIcon)}>
-            <MinusIcon aria-hidden="true" />
-          </span>
-        </Button>
-        <TextInput
-          {...inputProps}
-          type="number"
-          value={value}
-          name={inputName}
-          aria-label={inputAriaLabel}
-          {...(isDisabled && { isDisabled })}
-          {...(onChange && { onChange: (event, _value) => onChange(event) })}
-          onBlur={handleBlur}
-          {...(!onChange && { isReadOnly: true })}
-          onKeyDown={keyDownHandler}
-          validated={validated}
-        />
-        <Button
-          variant="control"
-          aria-label={plusBtnAriaLabel}
-          isDisabled={isDisabled || value >= max}
-          onClick={(evt) => onPlus(evt, inputName)}
-          {...plusBtnProps}
-        >
-          <span className={css(styles.numberInputIcon)}>
-            <PlusIcon aria-hidden="true" />
-          </span>
-        </Button>
+        <InputGroupItem>
+          <Button
+            variant="control"
+            aria-label={minusBtnAriaLabel}
+            isDisabled={isDisabled || value <= min}
+            onClick={(evt) => onMinus(evt, inputName)}
+            {...minusBtnProps}
+          >
+            <span className={css(styles.numberInputIcon)}>
+              <MinusIcon aria-hidden="true" />
+            </span>
+          </Button>
+        </InputGroupItem>
+        <InputGroupItem>
+          <TextInput
+            {...inputProps}
+            type="number"
+            value={value}
+            name={inputName}
+            aria-label={inputAriaLabel}
+            {...(isDisabled && { isDisabled })}
+            {...(onChange && { onChange: (event, _value) => onChange(event) })}
+            onBlur={handleBlur}
+            {...(!onChange && { isReadOnly: true })}
+            onKeyDown={keyDownHandler}
+            validated={validated}
+          />
+        </InputGroupItem>
+        <InputGroupItem>
+          <Button
+            variant="control"
+            aria-label={plusBtnAriaLabel}
+            isDisabled={isDisabled || value >= max}
+            onClick={(evt) => onPlus(evt, inputName)}
+            {...plusBtnProps}
+          >
+            <span className={css(styles.numberInputIcon)}>
+              <PlusIcon aria-hidden="true" />
+            </span>
+          </Button>
+        </InputGroupItem>
       </InputGroup>
       {unit && unitPosition === 'after' && numberInputUnit}
     </div>
diff --git a/packages/react-core/src/components/NumberInput/__tests__/__snapshots__/NumberInput.test.tsx.snap b/packages/react-core/src/components/NumberInput/__tests__/__snapshots__/NumberInput.test.tsx.snap
index 7684fd6264b..a2ba84280af 100644
--- a/packages/react-core/src/components/NumberInput/__tests__/__snapshots__/NumberInput.test.tsx.snap
+++ b/packages/react-core/src/components/NumberInput/__tests__/__snapshots__/NumberInput.test.tsx.snap
@@ -8,68 +8,80 @@ exports[`numberInput disables lower threshold 1`] = `
     <div
       class="pf-v5-c-input-group"
     >
-      <button
-        aria-disabled="true"
-        aria-label="Minus"
-        class="pf-v5-c-button pf-m-control pf-m-disabled"
-        data-ouia-component-id="OUIA-Generated-Button-control-13"
-        data-ouia-component-type="PF4/Button"
-        data-ouia-safe="true"
-        disabled=""
-        type="button"
-      >
-        <span
-          class="pf-v5-c-number-input__icon"
+      <div
+        class="pf-v5-c-input-group__item"
+      >
+        <button
+          aria-disabled="true"
+          aria-label="Minus"
+          class="pf-v5-c-button pf-m-control pf-m-disabled"
+          data-ouia-component-id="OUIA-Generated-Button-control-13"
+          data-ouia-component-type="PF4/Button"
+          data-ouia-safe="true"
+          disabled=""
+          type="button"
         >
-          <svg
-            aria-hidden="true"
-            class="pf-v5-svg"
-            fill="currentColor"
-            role="img"
-            viewBox="0 0 448 512"
+          <span
+            class="pf-v5-c-number-input__icon"
           >
-            <path
-              d="M416 208H32c-17.67 0-32 14.33-32 32v32c0 17.67 14.33 32 32 32h384c17.67 0 32-14.33 32-32v-32c0-17.67-14.33-32-32-32z"
-            />
-          </svg>
-        </span>
-      </button>
-      <input
-        aria-invalid="false"
-        aria-label="Input"
-        class="pf-v5-c-form-control"
-        data-ouia-component-id="OUIA-Generated-TextInputBase-7"
-        data-ouia-component-type="PF4/TextInput"
-        data-ouia-safe="true"
-        readonly=""
-        type="number"
-        value="0"
-      />
-      <button
-        aria-disabled="false"
-        aria-label="Plus"
-        class="pf-v5-c-button pf-m-control"
-        data-ouia-component-id="OUIA-Generated-Button-control-14"
-        data-ouia-component-type="PF4/Button"
-        data-ouia-safe="true"
-        type="button"
-      >
-        <span
-          class="pf-v5-c-number-input__icon"
+            <svg
+              aria-hidden="true"
+              class="pf-v5-svg"
+              fill="currentColor"
+              role="img"
+              viewBox="0 0 448 512"
+            >
+              <path
+                d="M416 208H32c-17.67 0-32 14.33-32 32v32c0 17.67 14.33 32 32 32h384c17.67 0 32-14.33 32-32v-32c0-17.67-14.33-32-32-32z"
+              />
+            </svg>
+          </span>
+        </button>
+      </div>
+      <div
+        class="pf-v5-c-input-group__item"
+      >
+        <input
+          aria-invalid="false"
+          aria-label="Input"
+          class="pf-v5-c-form-control"
+          data-ouia-component-id="OUIA-Generated-TextInputBase-7"
+          data-ouia-component-type="PF4/TextInput"
+          data-ouia-safe="true"
+          readonly=""
+          type="number"
+          value="0"
+        />
+      </div>
+      <div
+        class="pf-v5-c-input-group__item"
+      >
+        <button
+          aria-disabled="false"
+          aria-label="Plus"
+          class="pf-v5-c-button pf-m-control"
+          data-ouia-component-id="OUIA-Generated-Button-control-14"
+          data-ouia-component-type="PF4/Button"
+          data-ouia-safe="true"
+          type="button"
         >
-          <svg
-            aria-hidden="true"
-            class="pf-v5-svg"
-            fill="currentColor"
-            role="img"
-            viewBox="0 0 448 512"
+          <span
+            class="pf-v5-c-number-input__icon"
           >
-            <path
-              d="M416 208H272V64c0-17.67-14.33-32-32-32h-32c-17.67 0-32 14.33-32 32v144H32c-17.67 0-32 14.33-32 32v32c0 17.67 14.33 32 32 32h144v144c0 17.67 14.33 32 32 32h32c17.67 0 32-14.33 32-32V304h144c17.67 0 32-14.33 32-32v-32c0-17.67-14.33-32-32-32z"
-            />
-          </svg>
-        </span>
-      </button>
+            <svg
+              aria-hidden="true"
+              class="pf-v5-svg"
+              fill="currentColor"
+              role="img"
+              viewBox="0 0 448 512"
+            >
+              <path
+                d="M416 208H272V64c0-17.67-14.33-32-32-32h-32c-17.67 0-32 14.33-32 32v144H32c-17.67 0-32 14.33-32 32v32c0 17.67 14.33 32 32 32h144v144c0 17.67 14.33 32 32 32h32c17.67 0 32-14.33 32-32V304h144c17.67 0 32-14.33 32-32v-32c0-17.67-14.33-32-32-32z"
+              />
+            </svg>
+          </span>
+        </button>
+      </div>
     </div>
   </div>
 </DocumentFragment>
@@ -83,68 +95,80 @@ exports[`numberInput disables upper threshold 1`] = `
     <div
       class="pf-v5-c-input-group"
     >
-      <button
-        aria-disabled="false"
-        aria-label="Minus"
-        class="pf-v5-c-button pf-m-control"
-        data-ouia-component-id="OUIA-Generated-Button-control-15"
-        data-ouia-component-type="PF4/Button"
-        data-ouia-safe="true"
-        type="button"
-      >
-        <span
-          class="pf-v5-c-number-input__icon"
+      <div
+        class="pf-v5-c-input-group__item"
+      >
+        <button
+          aria-disabled="false"
+          aria-label="Minus"
+          class="pf-v5-c-button pf-m-control"
+          data-ouia-component-id="OUIA-Generated-Button-control-15"
+          data-ouia-component-type="PF4/Button"
+          data-ouia-safe="true"
+          type="button"
         >
-          <svg
-            aria-hidden="true"
-            class="pf-v5-svg"
-            fill="currentColor"
-            role="img"
-            viewBox="0 0 448 512"
+          <span
+            class="pf-v5-c-number-input__icon"
           >
-            <path
-              d="M416 208H32c-17.67 0-32 14.33-32 32v32c0 17.67 14.33 32 32 32h384c17.67 0 32-14.33 32-32v-32c0-17.67-14.33-32-32-32z"
-            />
-          </svg>
-        </span>
-      </button>
-      <input
-        aria-invalid="false"
-        aria-label="Input"
-        class="pf-v5-c-form-control"
-        data-ouia-component-id="OUIA-Generated-TextInputBase-8"
-        data-ouia-component-type="PF4/TextInput"
-        data-ouia-safe="true"
-        readonly=""
-        type="number"
-        value="100"
-      />
-      <button
-        aria-disabled="true"
-        aria-label="Plus"
-        class="pf-v5-c-button pf-m-control pf-m-disabled"
-        data-ouia-component-id="OUIA-Generated-Button-control-16"
-        data-ouia-component-type="PF4/Button"
-        data-ouia-safe="true"
-        disabled=""
-        type="button"
-      >
-        <span
-          class="pf-v5-c-number-input__icon"
+            <svg
+              aria-hidden="true"
+              class="pf-v5-svg"
+              fill="currentColor"
+              role="img"
+              viewBox="0 0 448 512"
+            >
+              <path
+                d="M416 208H32c-17.67 0-32 14.33-32 32v32c0 17.67 14.33 32 32 32h384c17.67 0 32-14.33 32-32v-32c0-17.67-14.33-32-32-32z"
+              />
+            </svg>
+          </span>
+        </button>
+      </div>
+      <div
+        class="pf-v5-c-input-group__item"
+      >
+        <input
+          aria-invalid="false"
+          aria-label="Input"
+          class="pf-v5-c-form-control"
+          data-ouia-component-id="OUIA-Generated-TextInputBase-8"
+          data-ouia-component-type="PF4/TextInput"
+          data-ouia-safe="true"
+          readonly=""
+          type="number"
+          value="100"
+        />
+      </div>
+      <div
+        class="pf-v5-c-input-group__item"
+      >
+        <button
+          aria-disabled="true"
+          aria-label="Plus"
+          class="pf-v5-c-button pf-m-control pf-m-disabled"
+          data-ouia-component-id="OUIA-Generated-Button-control-16"
+          data-ouia-component-type="PF4/Button"
+          data-ouia-safe="true"
+          disabled=""
+          type="button"
         >
-          <svg
-            aria-hidden="true"
-            class="pf-v5-svg"
-            fill="currentColor"
-            role="img"
-            viewBox="0 0 448 512"
+          <span
+            class="pf-v5-c-number-input__icon"
           >
-            <path
-              d="M416 208H272V64c0-17.67-14.33-32-32-32h-32c-17.67 0-32 14.33-32 32v144H32c-17.67 0-32 14.33-32 32v32c0 17.67 14.33 32 32 32h144v144c0 17.67 14.33 32 32 32h32c17.67 0 32-14.33 32-32V304h144c17.67 0 32-14.33 32-32v-32c0-17.67-14.33-32-32-32z"
-            />
-          </svg>
-        </span>
-      </button>
+            <svg
+              aria-hidden="true"
+              class="pf-v5-svg"
+              fill="currentColor"
+              role="img"
+              viewBox="0 0 448 512"
+            >
+              <path
+                d="M416 208H272V64c0-17.67-14.33-32-32-32h-32c-17.67 0-32 14.33-32 32v144H32c-17.67 0-32 14.33-32 32v32c0 17.67 14.33 32 32 32h144v144c0 17.67 14.33 32 32 32h32c17.67 0 32-14.33 32-32V304h144c17.67 0 32-14.33 32-32v-32c0-17.67-14.33-32-32-32z"
+              />
+            </svg>
+          </span>
+        </button>
+      </div>
     </div>
   </div>
 </DocumentFragment>
@@ -158,69 +182,81 @@ exports[`numberInput passes button props successfully 1`] = `
     <div
       class="pf-v5-c-input-group"
     >
-      <button
-        aria-disabled="false"
-        aria-label="Minus"
-        class="pf-v5-c-button pf-m-control"
-        data-ouia-component-id="OUIA-Generated-Button-control-25"
-        data-ouia-component-type="PF4/Button"
-        data-ouia-safe="true"
-        id="minus-id"
-        type="button"
-      >
-        <span
-          class="pf-v5-c-number-input__icon"
+      <div
+        class="pf-v5-c-input-group__item"
+      >
+        <button
+          aria-disabled="false"
+          aria-label="Minus"
+          class="pf-v5-c-button pf-m-control"
+          data-ouia-component-id="OUIA-Generated-Button-control-25"
+          data-ouia-component-type="PF4/Button"
+          data-ouia-safe="true"
+          id="minus-id"
+          type="button"
         >
-          <svg
-            aria-hidden="true"
-            class="pf-v5-svg"
-            fill="currentColor"
-            role="img"
-            viewBox="0 0 448 512"
+          <span
+            class="pf-v5-c-number-input__icon"
           >
-            <path
-              d="M416 208H32c-17.67 0-32 14.33-32 32v32c0 17.67 14.33 32 32 32h384c17.67 0 32-14.33 32-32v-32c0-17.67-14.33-32-32-32z"
-            />
-          </svg>
-        </span>
-      </button>
-      <input
-        aria-invalid="false"
-        aria-label="Input"
-        class="pf-v5-c-form-control"
-        data-ouia-component-id="OUIA-Generated-TextInputBase-13"
-        data-ouia-component-type="PF4/TextInput"
-        data-ouia-safe="true"
-        readonly=""
-        type="number"
-        value="5"
-      />
-      <button
-        aria-disabled="false"
-        aria-label="Plus"
-        class="pf-v5-c-button pf-m-control"
-        data-ouia-component-id="OUIA-Generated-Button-control-26"
-        data-ouia-component-type="PF4/Button"
-        data-ouia-safe="true"
-        id="plus-id"
-        type="button"
-      >
-        <span
-          class="pf-v5-c-number-input__icon"
+            <svg
+              aria-hidden="true"
+              class="pf-v5-svg"
+              fill="currentColor"
+              role="img"
+              viewBox="0 0 448 512"
+            >
+              <path
+                d="M416 208H32c-17.67 0-32 14.33-32 32v32c0 17.67 14.33 32 32 32h384c17.67 0 32-14.33 32-32v-32c0-17.67-14.33-32-32-32z"
+              />
+            </svg>
+          </span>
+        </button>
+      </div>
+      <div
+        class="pf-v5-c-input-group__item"
+      >
+        <input
+          aria-invalid="false"
+          aria-label="Input"
+          class="pf-v5-c-form-control"
+          data-ouia-component-id="OUIA-Generated-TextInputBase-13"
+          data-ouia-component-type="PF4/TextInput"
+          data-ouia-safe="true"
+          readonly=""
+          type="number"
+          value="5"
+        />
+      </div>
+      <div
+        class="pf-v5-c-input-group__item"
+      >
+        <button
+          aria-disabled="false"
+          aria-label="Plus"
+          class="pf-v5-c-button pf-m-control"
+          data-ouia-component-id="OUIA-Generated-Button-control-26"
+          data-ouia-component-type="PF4/Button"
+          data-ouia-safe="true"
+          id="plus-id"
+          type="button"
         >
-          <svg
-            aria-hidden="true"
-            class="pf-v5-svg"
-            fill="currentColor"
-            role="img"
-            viewBox="0 0 448 512"
+          <span
+            class="pf-v5-c-number-input__icon"
           >
-            <path
-              d="M416 208H272V64c0-17.67-14.33-32-32-32h-32c-17.67 0-32 14.33-32 32v144H32c-17.67 0-32 14.33-32 32v32c0 17.67 14.33 32 32 32h144v144c0 17.67 14.33 32 32 32h32c17.67 0 32-14.33 32-32V304h144c17.67 0 32-14.33 32-32v-32c0-17.67-14.33-32-32-32z"
-            />
-          </svg>
-        </span>
-      </button>
+            <svg
+              aria-hidden="true"
+              class="pf-v5-svg"
+              fill="currentColor"
+              role="img"
+              viewBox="0 0 448 512"
+            >
+              <path
+                d="M416 208H272V64c0-17.67-14.33-32-32-32h-32c-17.67 0-32 14.33-32 32v144H32c-17.67 0-32 14.33-32 32v32c0 17.67 14.33 32 32 32h144v144c0 17.67 14.33 32 32 32h32c17.67 0 32-14.33 32-32V304h144c17.67 0 32-14.33 32-32v-32c0-17.67-14.33-32-32-32z"
+              />
+            </svg>
+          </span>
+        </button>
+      </div>
     </div>
   </div>
 </DocumentFragment>
@@ -234,67 +270,79 @@ exports[`numberInput passes input props successfully 1`] = `
     <div
       class="pf-v5-c-input-group"
     >
-      <button
-        aria-disabled="false"
-        aria-label="Minus"
-        class="pf-v5-c-button pf-m-control"
-        data-ouia-component-id="OUIA-Generated-Button-control-23"
-        data-ouia-component-type="PF4/Button"
-        data-ouia-safe="true"
-        type="button"
-      >
-        <span
-          class="pf-v5-c-number-input__icon"
+      <div
+        class="pf-v5-c-input-group__item"
+      >
+        <button
+          aria-disabled="false"
+          aria-label="Minus"
+          class="pf-v5-c-button pf-m-control"
+          data-ouia-component-id="OUIA-Generated-Button-control-23"
+          data-ouia-component-type="PF4/Button"
+          data-ouia-safe="true"
+          type="button"
         >
-          <svg
-            aria-hidden="true"
-            class="pf-v5-svg"
-            fill="currentColor"
-            role="img"
-            viewBox="0 0 448 512"
+          <span
+            class="pf-v5-c-number-input__icon"
           >
-            <path
-              d="M416 208H32c-17.67 0-32 14.33-32 32v32c0 17.67 14.33 32 32 32h384c17.67 0 32-14.33 32-32v-32c0-17.67-14.33-32-32-32z"
-            />
-          </svg>
-        </span>
-      </button>
-      <input
-        aria-invalid="false"
-        aria-label="Input"
-        class="pf-v5-c-form-control"
-        data-ouia-component-id="OUIA-Generated-TextInputBase-12"
-        data-ouia-component-type="PF4/TextInput"
-        data-ouia-safe="true"
-        name="test-name"
-        type="number"
-        value="5"
-      />
-      <button
-        aria-disabled="false"
-        aria-label="Plus"
-        class="pf-v5-c-button pf-m-control"
-        data-ouia-component-id="OUIA-Generated-Button-control-24"
-        data-ouia-component-type="PF4/Button"
-        data-ouia-safe="true"
-        type="button"
-      >
-        <span
-          class="pf-v5-c-number-input__icon"
+            <svg
+              aria-hidden="true"
+              class="pf-v5-svg"
+              fill="currentColor"
+              role="img"
+              viewBox="0 0 448 512"
+            >
+              <path
+                d="M416 208H32c-17.67 0-32 14.33-32 32v32c0 17.67 14.33 32 32 32h384c17.67 0 32-14.33 32-32v-32c0-17.67-14.33-32-32-32z"
+              />
+            </svg>
+          </span>
+        </button>
+      </div>
+      <div
+        class="pf-v5-c-input-group__item"
+      >
+        <input
+          aria-invalid="false"
+          aria-label="Input"
+          class="pf-v5-c-form-control"
+          data-ouia-component-id="OUIA-Generated-TextInputBase-12"
+          data-ouia-component-type="PF4/TextInput"
+          data-ouia-safe="true"
+          name="test-name"
+          type="number"
+          value="5"
+        />
+      </div>
+      <div
+        class="pf-v5-c-input-group__item"
+      >
+        <button
+          aria-disabled="false"
+          aria-label="Plus"
+          class="pf-v5-c-button pf-m-control"
+          data-ouia-component-id="OUIA-Generated-Button-control-24"
+          data-ouia-component-type="PF4/Button"
+          data-ouia-safe="true"
+          type="button"
         >
-          <svg
-            aria-hidden="true"
-            class="pf-v5-svg"
-            fill="currentColor"
-            role="img"
-            viewBox="0 0 448 512"
+          <span
+            class="pf-v5-c-number-input__icon"
           >
-            <path
-              d="M416 208H272V64c0-17.67-14.33-32-32-32h-32c-17.67 0-32 14.33-32 32v144H32c-17.67 0-32 14.33-32 32v32c0 17.67 14.33 32 32 32h144v144c0 17.67 14.33 32 32 32h32c17.67 0 32-14.33 32-32V304h144c17.67 0 32-14.33 32-32v-32c0-17.67-14.33-32-32-32z"
-            />
-          </svg>
-        </span>
-      </button>
+            <svg
+              aria-hidden="true"
+              class="pf-v5-svg"
+              fill="currentColor"
+              role="img"
+              viewBox="0 0 448 512"
+            >
+              <path
+                d="M416 208H272V64c0-17.67-14.33-32-32-32h-32c-17.67 0-32 14.33-32 32v144H32c-17.67 0-32 14.33-32 32v32c0 17.67 14.33 32 32 32h144v144c0 17.67 14.33 32 32 32h32c17.67 0 32-14.33 32-32V304h144c17.67 0 32-14.33 32-32v-32c0-17.67-14.33-32-32-32z"
+              />
+            </svg>
+          </span>
+        </button>
+      </div>
     </div>
   </div>
 </DocumentFragment>
@@ -309,67 +357,79 @@ exports[`numberInput renders custom width 1`] = `
     <div
       class="pf-v5-c-input-group"
     >
-      <button
-        aria-disabled="false"
-        aria-label="Minus"
-        class="pf-v5-c-button pf-m-control"
-        data-ouia-component-id="OUIA-Generated-Button-control-21"
-        data-ouia-component-type="PF4/Button"
-        data-ouia-safe="true"
-        type="button"
-      >
-        <span
-          class="pf-v5-c-number-input__icon"
+      <div
+        class="pf-v5-c-input-group__item"
+      >
+        <button
+          aria-disabled="false"
+          aria-label="Minus"
+          class="pf-v5-c-button pf-m-control"
+          data-ouia-component-id="OUIA-Generated-Button-control-21"
+          data-ouia-component-type="PF4/Button"
+          data-ouia-safe="true"
+          type="button"
         >
-          <svg
-            aria-hidden="true"
-            class="pf-v5-svg"
-            fill="currentColor"
-            role="img"
-            viewBox="0 0 448 512"
+          <span
+            class="pf-v5-c-number-input__icon"
           >
-            <path
-              d="M416 208H32c-17.67 0-32 14.33-32 32v32c0 17.67 14.33 32 32 32h384c17.67 0 32-14.33 32-32v-32c0-17.67-14.33-32-32-32z"
-            />
-          </svg>
-        </span>
-      </button>
-      <input
-        aria-invalid="false"
-        aria-label="Input"
-        class="pf-v5-c-form-control"
-        data-ouia-component-id="OUIA-Generated-TextInputBase-11"
-        data-ouia-component-type="PF4/TextInput"
-        data-ouia-safe="true"
-        readonly=""
-        type="number"
-        value="5"
-      />
-      <button
-        aria-disabled="false"
-        aria-label="Plus"
-        class="pf-v5-c-button pf-m-control"
-        data-ouia-component-id="OUIA-Generated-Button-control-22"
-        data-ouia-component-type="PF4/Button"
-        data-ouia-safe="true"
-        type="button"
-      >
-        <span
-          class="pf-v5-c-number-input__icon"
+            <svg
+              aria-hidden="true"
+              class="pf-v5-svg"
+              fill="currentColor"
+              role="img"
+              viewBox="0 0 448 512"
+            >
+              <path
+                d="M416 208H32c-17.67 0-32 14.33-32 32v32c0 17.67 14.33 32 32 32h384c17.67 0 32-14.33 32-32v-32c0-17.67-14.33-32-32-32z"
+              />
+            </svg>
+          </span>
+        </button>
+      </div>
+      <div
+        class="pf-v5-c-input-group__item"
+      >
+        <input
+          aria-invalid="false"
+          aria-label="Input"
+          class="pf-v5-c-form-control"
+          data-ouia-component-id="OUIA-Generated-TextInputBase-11"
+          data-ouia-component-type="PF4/TextInput"
+          data-ouia-safe="true"
+          readonly=""
+          type="number"
+          value="5"
+        />
+      </div>
+      <div
+        class="pf-v5-c-input-group__item"
+      >
+        <button
+          aria-disabled="false"
+          aria-label="Plus"
+          class="pf-v5-c-button pf-m-control"
+          data-ouia-component-id="OUIA-Generated-Button-control-22"
+          data-ouia-component-type="PF4/Button"
+          data-ouia-safe="true"
+          type="button"
         >
-          <svg
-            aria-hidden="true"
-            class="pf-v5-svg"
-            fill="currentColor"
-            role="img"
-            viewBox="0 0 448 512"
+          <span
+            class="pf-v5-c-number-input__icon"
           >
-            <path
-              d="M416 208H272V64c0-17.67-14.33-32-32-32h-32c-17.67 0-32 14.33-32 32v144H32c-17.67 0-32 14.33-32 32v32c0 17.67 14.33 32 32 32h144v144c0 17.67 14.33 32 32 32h32c17.67 0 32-14.33 32-32V304h144c17.67 0 32-14.33 32-32v-32c0-17.67-14.33-32-32-32z"
-            />
-          </svg>
-        </span>
-      </button>
+            <svg
+              aria-hidden="true"
+              class="pf-v5-svg"
+              fill="currentColor"
+              role="img"
+              viewBox="0 0 448 512"
+            >
+              <path
+                d="M416 208H272V64c0-17.67-14.33-32-32-32h-32c-17.67 0-32 14.33-32 32v144H32c-17.67 0-32 14.33-32 32v32c0 17.67 14.33 32 32 32h144v144c0 17.67 14.33 32 32 32h32c17.67 0 32-14.33 32-32V304h144c17.67 0 32-14.33 32-32v-32c0-17.67-14.33-32-32-32z"
+              />
+            </svg>
+          </span>
+        </button>
+      </div>
     </div>
   </div>
 </DocumentFragment>
@@ -384,67 +444,79 @@ exports[`numberInput renders defaults & extra props 1`] = `
     <div
       class="pf-v5-c-input-group"
     >
-      <button
-        aria-disabled="false"
-        aria-label="Minus"
-        class="pf-v5-c-button pf-m-control"
-        data-ouia-component-id="OUIA-Generated-Button-control-1"
-        data-ouia-component-type="PF4/Button"
-        data-ouia-safe="true"
-        type="button"
-      >
-        <span
-          class="pf-v5-c-number-input__icon"
+      <div
+        class="pf-v5-c-input-group__item"
+      >
+        <button
+          aria-disabled="false"
+          aria-label="Minus"
+          class="pf-v5-c-button pf-m-control"
+          data-ouia-component-id="OUIA-Generated-Button-control-1"
+          data-ouia-component-type="PF4/Button"
+          data-ouia-safe="true"
+          type="button"
         >
-          <svg
-            aria-hidden="true"
-            class="pf-v5-svg"
-            fill="currentColor"
-            role="img"
-            viewBox="0 0 448 512"
+          <span
+            class="pf-v5-c-number-input__icon"
           >
-            <path
-              d="M416 208H32c-17.67 0-32 14.33-32 32v32c0 17.67 14.33 32 32 32h384c17.67 0 32-14.33 32-32v-32c0-17.67-14.33-32-32-32z"
-            />
-          </svg>
-        </span>
-      </button>
-      <input
-        aria-invalid="false"
-        aria-label="Input"
-        class="pf-v5-c-form-control"
-        data-ouia-component-id="OUIA-Generated-TextInputBase-1"
-        data-ouia-component-type="PF4/TextInput"
-        data-ouia-safe="true"
-        readonly=""
-        type="number"
-        value="0"
-      />
-      <button
-        aria-disabled="false"
-        aria-label="Plus"
-        class="pf-v5-c-button pf-m-control"
-        data-ouia-component-id="OUIA-Generated-Button-control-2"
-        data-ouia-component-type="PF4/Button"
-        data-ouia-safe="true"
-        type="button"
-      >
-        <span
-          class="pf-v5-c-number-input__icon"
+            <svg
+              aria-hidden="true"
+              class="pf-v5-svg"
+              fill="currentColor"
+              role="img"
+              viewBox="0 0 448 512"
+            >
+              <path
+                d="M416 208H32c-17.67 0-32 14.33-32 32v32c0 17.67 14.33 32 32 32h384c17.67 0 32-14.33 32-32v-32c0-17.67-14.33-32-32-32z"
+              />
+            </svg>
+          </span>
+        </button>
+      </div>
+      <div
+        class="pf-v5-c-input-group__item"
+      >
+        <input
+          aria-invalid="false"
+          aria-label="Input"
+          class="pf-v5-c-form-control"
+          data-ouia-component-id="OUIA-Generated-TextInputBase-1"
+          data-ouia-component-type="PF4/TextInput"
+          data-ouia-safe="true"
+          readonly=""
+          type="number"
+          value="0"
+        />
+      </div>
+      <div
+        class="pf-v5-c-input-group__item"
+      >
+        <button
+          aria-disabled="false"
+          aria-label="Plus"
+          class="pf-v5-c-button pf-m-control"
+          data-ouia-component-id="OUIA-Generated-Button-control-2"
+          data-ouia-component-type="PF4/Button"
+          data-ouia-safe="true"
+          type="button"
         >
-          <svg
-            aria-hidden="true"
-            class="pf-v5-svg"
-            fill="currentColor"
-            role="img"
-            viewBox="0 0 448 512"
+          <span
+            class="pf-v5-c-number-input__icon"
           >
-            <path
-              d="M416 208H272V64c0-17.67-14.33-32-32-32h-32c-17.67 0-32 14.33-32 32v144H32c-17.67 0-32 14.33-32 32v32c0 17.67 14.33 32 32 32h144v144c0 17.67 14.33 32 32 32h32c17.67 0 32-14.33 32-32V304h144c17.67 0 32-14.33 32-32v-32c0-17.67-14.33-32-32-32z"
-            />
-          </svg>
-        </span>
-      </button>
+            <svg
+              aria-hidden="true"
+              class="pf-v5-svg"
+              fill="currentColor"
+              role="img"
+              viewBox="0 0 448 512"
+            >
+              <path
+                d="M416 208H272V64c0-17.67-14.33-32-32-32h-32c-17.67 0-32 14.33-32 32v144H32c-17.67 0-32 14.33-32 32v32c0 17.67 14.33 32 32 32h144v144c0 17.67 14.33 32 32 32h32c17.67 0 32-14.33 32-32V304h144c17.67 0 32-14.33 32-32v-32c0-17.67-14.33-32-32-32z"
+              />
+            </svg>
+          </span>
+        </button>
+      </div>
     </div>
   </div>
 </DocumentFragment>
@@ -458,70 +530,82 @@ exports[`numberInput renders disabled 1`] = `
     <div
       class="pf-v5-c-input-group"
     >
-      <button
-        aria-disabled="true"
-        aria-label="Minus"
-        class="pf-v5-c-button pf-m-control pf-m-disabled"
-        data-ouia-component-id="OUIA-Generated-Button-control-11"
-        data-ouia-component-type="PF4/Button"
-        data-ouia-safe="true"
-        disabled=""
-        type="button"
-      >
-        <span
-          class="pf-v5-c-number-input__icon"
+      <div
+        class="pf-v5-c-input-group__item"
+      >
+        <button
+          aria-disabled="true"
+          aria-label="Minus"
+          class="pf-v5-c-button pf-m-control pf-m-disabled"
+          data-ouia-component-id="OUIA-Generated-Button-control-11"
+          data-ouia-component-type="PF4/Button"
+          data-ouia-safe="true"
+          disabled=""
+          type="button"
         >
-          <svg
-            aria-hidden="true"
-            class="pf-v5-svg"
-            fill="currentColor"
-            role="img"
-            viewBox="0 0 448 512"
+          <span
+            class="pf-v5-c-number-input__icon"
           >
-            <path
-              d="M416 208H32c-17.67 0-32 14.33-32 32v32c0 17.67 14.33 32 32 32h384c17.67 0 32-14.33 32-32v-32c0-17.67-14.33-32-32-32z"
-            />
-          </svg>
-        </span>
-      </button>
-      <input
-        aria-invalid="false"
-        aria-label="Input"
-        class="pf-v5-c-form-control"
-        data-ouia-component-id="OUIA-Generated-TextInputBase-6"
-        data-ouia-component-type="PF4/TextInput"
-        data-ouia-safe="true"
-        disabled=""
-        readonly=""
-        type="number"
-        value="90"
-      />
-      <button
-        aria-disabled="true"
-        aria-label="Plus"
-        class="pf-v5-c-button pf-m-control pf-m-disabled"
-        data-ouia-component-id="OUIA-Generated-Button-control-12"
-        data-ouia-component-type="PF4/Button"
-        data-ouia-safe="true"
-        disabled=""
-        type="button"
-      >
-        <span
-          class="pf-v5-c-number-input__icon"
+            <svg
+              aria-hidden="true"
+              class="pf-v5-svg"
+              fill="currentColor"
+              role="img"
+              viewBox="0 0 448 512"
+            >
+              <path
+                d="M416 208H32c-17.67 0-32 14.33-32 32v32c0 17.67 14.33 32 32 32h384c17.67 0 32-14.33 32-32v-32c0-17.67-14.33-32-32-32z"
+              />
+            </svg>
+          </span>
+        </button>
+      </div>
+      <div
+        class="pf-v5-c-input-group__item"
+      >
+        <input
+          aria-invalid="false"
+          aria-label="Input"
+          class="pf-v5-c-form-control"
+          data-ouia-component-id="OUIA-Generated-TextInputBase-6"
+          data-ouia-component-type="PF4/TextInput"
+          data-ouia-safe="true"
+          disabled=""
+          readonly=""
+          type="number"
+          value="90"
+        />
+      </div>
+      <div
+        class="pf-v5-c-input-group__item"
+      >
+        <button
+          aria-disabled="true"
+          aria-label="Plus"
+          class="pf-v5-c-button pf-m-control pf-m-disabled"
+          data-ouia-component-id="OUIA-Generated-Button-control-12"
+          data-ouia-component-type="PF4/Button"
+          data-ouia-safe="true"
+          disabled=""
+          type="button"
         >
-          <svg
-            aria-hidden="true"
-            class="pf-v5-svg"
-            fill="currentColor"
-            role="img"
-            viewBox="0 0 448 512"
+          <span
+            class="pf-v5-c-number-input__icon"
           >
-            <path
-              d="M416 208H272V64c0-17.67-14.33-32-32-32h-32c-17.67 0-32 14.33-32 32v144H32c-17.67 0-32 14.33-32 32v32c0 17.67 14.33 32 32 32h144v144c0 17.67 14.33 32 32 32h32c17.67 0 32-14.33 32-32V304h144c17.67 0 32-14.33 32-32v-32c0-17.67-14.33-32-32-32z"
-            />
-          </svg>
-        </span>
-      </button>
+            <svg
+              aria-hidden="true"
+              class="pf-v5-svg"
+              fill="currentColor"
+              role="img"
+              viewBox="0 0 448 512"
+            >
+              <path
+                d="M416 208H272V64c0-17.67-14.33-32-32-32h-32c-17.67 0-32 14.33-32 32v144H32c-17.67 0-32 14.33-32 32v32c0 17.67 14.33 32 32 32h144v144c0 17.67 14.33 32 32 32h32c17.67 0 32-14.33 32-32V304h144c17.67 0 32-14.33 32-32v-32c0-17.67-14.33-32-32-32z"
+              />
+            </svg>
+          </span>
+        </button>
+      </div>
     </div>
   </div>
 </DocumentFragment>
@@ -535,67 +619,79 @@ exports[`numberInput renders error validated 1`] = `
     <div
       class="pf-v5-c-input-group"
     >
-      <button
-        aria-disabled="false"
-        aria-label="Minus"
-        class="pf-v5-c-button pf-m-control"
-        data-ouia-component-id="OUIA-Generated-Button-control-5"
-        data-ouia-component-type="PF4/Button"
-        data-ouia-safe="true"
-        type="button"
-      >
-        <span
-          class="pf-v5-c-number-input__icon"
+      <div
+        class="pf-v5-c-input-group__item"
+      >
+        <button
+          aria-disabled="false"
+          aria-label="Minus"
+          class="pf-v5-c-button pf-m-control"
+          data-ouia-component-id="OUIA-Generated-Button-control-5"
+          data-ouia-component-type="PF4/Button"
+          data-ouia-safe="true"
+          type="button"
         >
-          <svg
-            aria-hidden="true"
-            class="pf-v5-svg"
-            fill="currentColor"
-            role="img"
-            viewBox="0 0 448 512"
+          <span
+            class="pf-v5-c-number-input__icon"
           >
-            <path
-              d="M416 208H32c-17.67 0-32 14.33-32 32v32c0 17.67 14.33 32 32 32h384c17.67 0 32-14.33 32-32v-32c0-17.67-14.33-32-32-32z"
-            />
-          </svg>
-        </span>
-      </button>
-      <input
-        aria-invalid="true"
-        aria-label="Input"
-        class="pf-v5-c-form-control"
-        data-ouia-component-id="OUIA-Generated-TextInputBase-3"
-        data-ouia-component-type="PF4/TextInput"
-        data-ouia-safe="true"
-        readonly=""
-        type="number"
-        value="0"
-      />
-      <button
-        aria-disabled="false"
-        aria-label="Plus"
-        class="pf-v5-c-button pf-m-control"
-        data-ouia-component-id="OUIA-Generated-Button-control-6"
-        data-ouia-component-type="PF4/Button"
-        data-ouia-safe="true"
-        type="button"
-      >
-        <span
-          class="pf-v5-c-number-input__icon"
+            <svg
+              aria-hidden="true"
+              class="pf-v5-svg"
+              fill="currentColor"
+              role="img"
+              viewBox="0 0 448 512"
+            >
+              <path
+                d="M416 208H32c-17.67 0-32 14.33-32 32v32c0 17.67 14.33 32 32 32h384c17.67 0 32-14.33 32-32v-32c0-17.67-14.33-32-32-32z"
+              />
+            </svg>
+          </span>
+        </button>
+      </div>
+      <div
+        class="pf-v5-c-input-group__item"
+      >
+        <input
+          aria-invalid="true"
+          aria-label="Input"
+          class="pf-v5-c-form-control"
+          data-ouia-component-id="OUIA-Generated-TextInputBase-3"
+          data-ouia-component-type="PF4/TextInput"
+          data-ouia-safe="true"
+          readonly=""
+          type="number"
+          value="0"
+        />
+      </div>
+      <div
+        class="pf-v5-c-input-group__item"
+      >
+        <button
+          aria-disabled="false"
+          aria-label="Plus"
+          class="pf-v5-c-button pf-m-control"
+          data-ouia-component-id="OUIA-Generated-Button-control-6"
+          data-ouia-component-type="PF4/Button"
+          data-ouia-safe="true"
+          type="button"
         >
-          <svg
-            aria-hidden="true"
-            class="pf-v5-svg"
-            fill="currentColor"
-            role="img"
-            viewBox="0 0 448 512"
+          <span
+            class="pf-v5-c-number-input__icon"
           >
-            <path
-              d="M416 208H272V64c0-17.67-14.33-32-32-32h-32c-17.67 0-32 14.33-32 32v144H32c-17.67 0-32 14.33-32 32v32c0 17.67 14.33 32 32 32h144v144c0 17.67 14.33 32 32 32h32c17.67 0 32-14.33 32-32V304h144c17.67 0 32-14.33 32-32v-32c0-17.67-14.33-32-32-32z"
-            />
-          </svg>
-        </span>
-      </button>
+            <svg
+              aria-hidden="true"
+              class="pf-v5-svg"
+              fill="currentColor"
+              role="img"
+              viewBox="0 0 448 512"
+            >
+              <path
+                d="M416 208H272V64c0-17.67-14.33-32-32-32h-32c-17.67 0-32 14.33-32 32v144H32c-17.67 0-32 14.33-32 32v32c0 17.67 14.33 32 32 32h144v144c0 17.67 14.33 32 32 32h32c17.67 0 32-14.33 32-32V304h144c17.67 0 32-14.33 32-32v-32c0-17.67-14.33-32-32-32z"
+              />
+            </svg>
+          </span>
+        </button>
+      </div>
     </div>
   </div>
 </DocumentFragment>
@@ -609,67 +705,79 @@ exports[`numberInput renders success validated 1`] = `
     <div
       class="pf-v5-c-input-group"
     >
-      <button
-        aria-disabled="false"
-        aria-label="Minus"
-        class="pf-v5-c-button pf-m-control"
-        data-ouia-component-id="OUIA-Generated-Button-control-3"
-        data-ouia-component-type="PF4/Button"
-        data-ouia-safe="true"
-        type="button"
-      >
-        <span
-          class="pf-v5-c-number-input__icon"
+      <div
+        class="pf-v5-c-input-group__item"
+      >
+        <button
+          aria-disabled="false"
+          aria-label="Minus"
+          class="pf-v5-c-button pf-m-control"
+          data-ouia-component-id="OUIA-Generated-Button-control-3"
+          data-ouia-component-type="PF4/Button"
+          data-ouia-safe="true"
+          type="button"
         >
-          <svg
-            aria-hidden="true"
-            class="pf-v5-svg"
-            fill="currentColor"
-            role="img"
-            viewBox="0 0 448 512"
+          <span
+            class="pf-v5-c-number-input__icon"
           >
-            <path
-              d="M416 208H32c-17.67 0-32 14.33-32 32v32c0 17.67 14.33 32 32 32h384c17.67 0 32-14.33 32-32v-32c0-17.67-14.33-32-32-32z"
-            />
-          </svg>
-        </span>
-      </button>
-      <input
-        aria-invalid="false"
-        aria-label="Input"
-        class="pf-v5-c-form-control pf-m-success"
-        data-ouia-component-id="OUIA-Generated-TextInputBase-2"
-        data-ouia-component-type="PF4/TextInput"
-        data-ouia-safe="true"
-        readonly=""
-        type="number"
-        value="0"
-      />
-      <button
-        aria-disabled="false"
-        aria-label="Plus"
-        class="pf-v5-c-button pf-m-control"
-        data-ouia-component-id="OUIA-Generated-Button-control-4"
-        data-ouia-component-type="PF4/Button"
-        data-ouia-safe="true"
-        type="button"
-      >
-        <span
-          class="pf-v5-c-number-input__icon"
+            <svg
+              aria-hidden="true"
+              class="pf-v5-svg"
+              fill="currentColor"
+              role="img"
+              viewBox="0 0 448 512"
+            >
+              <path
+                d="M416 208H32c-17.67 0-32 14.33-32 32v32c0 17.67 14.33 32 32 32h384c17.67 0 32-14.33 32-32v-32c0-17.67-14.33-32-32-32z"
+              />
+            </svg>
+          </span>
+        </button>
+      </div>
+      <div
+        class="pf-v5-c-input-group__item"
+      >
+        <input
+          aria-invalid="false"
+          aria-label="Input"
+          class="pf-v5-c-form-control pf-m-success"
+          data-ouia-component-id="OUIA-Generated-TextInputBase-2"
+          data-ouia-component-type="PF4/TextInput"
+          data-ouia-safe="true"
+          readonly=""
+          type="number"
+          value="0"
+        />
+      </div>
+      <div
+        class="pf-v5-c-input-group__item"
+      >
+        <button
+          aria-disabled="false"
+          aria-label="Plus"
+          class="pf-v5-c-button pf-m-control"
+          data-ouia-component-id="OUIA-Generated-Button-control-4"
+          data-ouia-component-type="PF4/Button"
+          data-ouia-safe="true"
+          type="button"
         >
-          <svg
-            aria-hidden="true"
-            class="pf-v5-svg"
-            fill="currentColor"
-            role="img"
-            viewBox="0 0 448 512"
+          <span
+            class="pf-v5-c-number-input__icon"
           >
-            <path
-              d="M416 208H272V64c0-17.67-14.33-32-32-32h-32c-17.67 0-32 14.33-32 32v144H32c-17.67 0-32 14.33-32 32v32c0 17.67 14.33 32 32 32h144v144c0 17.67 14.33 32 32 32h32c17.67 0 32-14.33 32-32V304h144c17.67 0 32-14.33 32-32v-32c0-17.67-14.33-32-32-32z"
-            />
-          </svg>
-        </span>
-      </button>
+            <svg
+              aria-hidden="true"
+              class="pf-v5-svg"
+              fill="currentColor"
+              role="img"
+              viewBox="0 0 448 512"
+            >
+              <path
+                d="M416 208H272V64c0-17.67-14.33-32-32-32h-32c-17.67 0-32 14.33-32 32v144H32c-17.67 0-32 14.33-32 32v32c0 17.67 14.33 32 32 32h144v144c0 17.67 14.33 32 32 32h32c17.67 0 32-14.33 32-32V304h144c17.67 0 32-14.33 32-32v-32c0-17.67-14.33-32-32-32z"
+              />
+            </svg>
+          </span>
+        </button>
+      </div>
     </div>
   </div>
 </DocumentFragment>
@@ -688,67 +796,79 @@ exports[`numberInput renders unit & position 1`] = `
     <div
       class="pf-v5-c-input-group"
     >
-      <button
-        aria-disabled="false"
-        aria-label="Minus"
-        class="pf-v5-c-button pf-m-control"
-        data-ouia-component-id="OUIA-Generated-Button-control-19"
-        data-ouia-component-type="PF4/Button"
-        data-ouia-safe="true"
-        type="button"
-      >
-        <span
-          class="pf-v5-c-number-input__icon"
+      <div
+        class="pf-v5-c-input-group__item"
+      >
+        <button
+          aria-disabled="false"
+          aria-label="Minus"
+          class="pf-v5-c-button pf-m-control"
+          data-ouia-component-id="OUIA-Generated-Button-control-19"
+          data-ouia-component-type="PF4/Button"
+          data-ouia-safe="true"
+          type="button"
         >
-          <svg
-            aria-hidden="true"
-            class="pf-v5-svg"
-            fill="currentColor"
-            role="img"
-            viewBox="0 0 448 512"
+          <span
+            class="pf-v5-c-number-input__icon"
           >
-            <path
-              d="M416 208H32c-17.67 0-32 14.33-32 32v32c0 17.67 14.33 32 32 32h384c17.67 0 32-14.33 32-32v-32c0-17.67-14.33-32-32-32z"
-            />
-          </svg>
-        </span>
-      </button>
-      <input
-        aria-invalid="false"
-        aria-label="Input"
-        class="pf-v5-c-form-control"
-        data-ouia-component-id="OUIA-Generated-TextInputBase-10"
-        data-ouia-component-type="PF4/TextInput"
-        data-ouia-safe="true"
-        readonly=""
-        type="number"
-        value="5"
-      />
-      <button
-        aria-disabled="false"
-        aria-label="Plus"
-        class="pf-v5-c-button pf-m-control"
-        data-ouia-component-id="OUIA-Generated-Button-control-20"
-        data-ouia-component-type="PF4/Button"
-        data-ouia-safe="true"
-        type="button"
-      >
-        <span
-          class="pf-v5-c-number-input__icon"
+            <svg
+              aria-hidden="true"
+              class="pf-v5-svg"
+              fill="currentColor"
+              role="img"
+              viewBox="0 0 448 512"
+            >
+              <path
+                d="M416 208H32c-17.67 0-32 14.33-32 32v32c0 17.67 14.33 32 32 32h384c17.67 0 32-14.33 32-32v-32c0-17.67-14.33-32-32-32z"
+              />
+            </svg>
+          </span>
+        </button>
+      </div>
+      <div
+        class="pf-v5-c-input-group__item"
+      >
+        <input
+          aria-invalid="false"
+          aria-label="Input"
+          class="pf-v5-c-form-control"
+          data-ouia-component-id="OUIA-Generated-TextInputBase-10"
+          data-ouia-component-type="PF4/TextInput"
+          data-ouia-safe="true"
+          readonly=""
+          type="number"
+          value="5"
+        />
+      </div>
+      <div
+        class="pf-v5-c-input-group__item"
+      >
+        <button
+          aria-disabled="false"
+          aria-label="Plus"
+          class="pf-v5-c-button pf-m-control"
+          data-ouia-component-id="OUIA-Generated-Button-control-20"
+          data-ouia-component-type="PF4/Button"
+          data-ouia-safe="true"
+          type="button"
         >
-          <svg
-            aria-hidden="true"
-            class="pf-v5-svg"
-            fill="currentColor"
-            role="img"
-            viewBox="0 0 448 512"
+          <span
+            class="pf-v5-c-number-input__icon"
           >
-            <path
-              d="M416 208H272V64c0-17.67-14.33-32-32-32h-32c-17.67 0-32 14.33-32 32v144H32c-17.67 0-32 14.33-32 32v32c0 17.67 14.33 32 32 32h144v144c0 17.67 14.33 32 32 32h32c17.67 0 32-14.33 32-32V304h144c17.67 0 32-14.33 32-32v-32c0-17.67-14.33-32-32-32z"
-            />
-          </svg>
-        </span>
-      </button>
+            <svg
+              aria-hidden="true"
+              class="pf-v5-svg"
+              fill="currentColor"
+              role="img"
+              viewBox="0 0 448 512"
+            >
+              <path
+                d="M416 208H272V64c0-17.67-14.33-32-32-32h-32c-17.67 0-32 14.33-32 32v144H32c-17.67 0-32 14.33-32 32v32c0 17.67 14.33 32 32 32h144v144c0 17.67 14.33 32 32 32h32c17.67 0 32-14.33 32-32V304h144c17.67 0 32-14.33 32-32v-32c0-17.67-14.33-32-32-32z"
+              />
+            </svg>
+          </span>
+        </button>
+      </div>
     </div>
   </div>
 </DocumentFragment>
@@ -762,67 +882,79 @@ exports[`numberInput renders unit 1`] = `
     <div
       class="pf-v5-c-input-group"
     >
-      <button
-        aria-disabled="false"
-        aria-label="Minus"
-        class="pf-v5-c-button pf-m-control"
-        data-ouia-component-id="OUIA-Generated-Button-control-17"
-        data-ouia-component-type="PF4/Button"
-        data-ouia-safe="true"
-        type="button"
-      >
-        <span
-          class="pf-v5-c-number-input__icon"
+      <div
+        class="pf-v5-c-input-group__item"
+      >
+        <button
+          aria-disabled="false"
+          aria-label="Minus"
+          class="pf-v5-c-button pf-m-control"
+          data-ouia-component-id="OUIA-Generated-Button-control-17"
+          data-ouia-component-type="PF4/Button"
+          data-ouia-safe="true"
+          type="button"
         >
-          <svg
-            aria-hidden="true"
-            class="pf-v5-svg"
-            fill="currentColor"
-            role="img"
-            viewBox="0 0 448 512"
+          <span
+            class="pf-v5-c-number-input__icon"
           >
-            <path
-              d="M416 208H32c-17.67 0-32 14.33-32 32v32c0 17.67 14.33 32 32 32h384c17.67 0 32-14.33 32-32v-32c0-17.67-14.33-32-32-32z"
-            />
-          </svg>
-        </span>
-      </button>
-      <input
-        aria-invalid="false"
-        aria-label="Input"
-        class="pf-v5-c-form-control"
-        data-ouia-component-id="OUIA-Generated-TextInputBase-9"
-        data-ouia-component-type="PF4/TextInput"
-        data-ouia-safe="true"
-        readonly=""
-        type="number"
-        value="5"
-      />
-      <button
-        aria-disabled="false"
-        aria-label="Plus"
-        class="pf-v5-c-button pf-m-control"
-        data-ouia-component-id="OUIA-Generated-Button-control-18"
-        data-ouia-component-type="PF4/Button"
-        data-ouia-safe="true"
-        type="button"
-      >
-        <span
-          class="pf-v5-c-number-input__icon"
+            <svg
+              aria-hidden="true"
+              class="pf-v5-svg"
+              fill="currentColor"
+              role="img"
+              viewBox="0 0 448 512"
+            >
+              <path
+                d="M416 208H32c-17.67 0-32 14.33-32 32v32c0 17.67 14.33 32 32 32h384c17.67 0 32-14.33 32-32v-32c0-17.67-14.33-32-32-32z"
+              />
+            </svg>
+          </span>
+        </button>
+      </div>
+      <div
+        class="pf-v5-c-input-group__item"
+      >
+        <input
+          aria-invalid="false"
+          aria-label="Input"
+          class="pf-v5-c-form-control"
+          data-ouia-component-id="OUIA-Generated-TextInputBase-9"
+          data-ouia-component-type="PF4/TextInput"
+          data-ouia-safe="true"
+          readonly=""
+          type="number"
+          value="5"
+        />
+      </div>
+      <div
+        class="pf-v5-c-input-group__item"
+      >
+        <button
+          aria-disabled="false"
+          aria-label="Plus"
+          class="pf-v5-c-button pf-m-control"
+          data-ouia-component-id="OUIA-Generated-Button-control-18"
+          data-ouia-component-type="PF4/Button"
+          data-ouia-safe="true"
+          type="button"
         >
-          <svg
-            aria-hidden="true"
-            class="pf-v5-svg"
-            fill="currentColor"
-            role="img"
-            viewBox="0 0 448 512"
+          <span
+            class="pf-v5-c-number-input__icon"
           >
-            <path
-              d="M416 208H272V64c0-17.67-14.33-32-32-32h-32c-17.67 0-32 14.33-32 32v144H32c-17.67 0-32 14.33-32 32v32c0 17.67 14.33 32 32 32h144v144c0 17.67 14.33 32 32 32h32c17.67 0 32-14.33 32-32V304h144c17.67 0 32-14.33 32-32v-32c0-17.67-14.33-32-32-32z"
-            />
-          </svg>
-        </span>
-      </button>
+            <svg
+              aria-hidden="true"
+              class="pf-v5-svg"
+              fill="currentColor"
+              role="img"
+              viewBox="0 0 448 512"
+            >
+              <path
+                d="M416 208H272V64c0-17.67-14.33-32-32-32h-32c-17.67 0-32 14.33-32 32v144H32c-17.67 0-32 14.33-32 32v32c0 17.67 14.33 32 32 32h144v144c0 17.67 14.33 32 32 32h32c17.67 0 32-14.33 32-32V304h144c17.67 0 32-14.33 32-32v-32c0-17.67-14.33-32-32-32z"
+              />
+            </svg>
+          </span>
+        </button>
+      </div>
     </div>
     <div
       class="pf-v5-c-number-input__unit"
@@ -841,67 +973,79 @@ exports[`numberInput renders value 1`] = `
     <div
       class="pf-v5-c-input-group"
     >
-      <button
-        aria-disabled="false"
-        aria-label="Minus"
-        class="pf-v5-c-button pf-m-control"
-        data-ouia-component-id="OUIA-Generated-Button-control-9"
-        data-ouia-component-type="PF4/Button"
-        data-ouia-safe="true"
-        type="button"
-      >
-        <span
-          class="pf-v5-c-number-input__icon"
+      <div
+        class="pf-v5-c-input-group__item"
+      >
+        <button
+          aria-disabled="false"
+          aria-label="Minus"
+          class="pf-v5-c-button pf-m-control"
+          data-ouia-component-id="OUIA-Generated-Button-control-9"
+          data-ouia-component-type="PF4/Button"
+          data-ouia-safe="true"
+          type="button"
         >
-          <svg
-            aria-hidden="true"
-            class="pf-v5-svg"
-            fill="currentColor"
-            role="img"
-            viewBox="0 0 448 512"
+          <span
+            class="pf-v5-c-number-input__icon"
           >
-            <path
-              d="M416 208H32c-17.67 0-32 14.33-32 32v32c0 17.67 14.33 32 32 32h384c17.67 0 32-14.33 32-32v-32c0-17.67-14.33-32-32-32z"
-            />
-          </svg>
-        </span>
-      </button>
-      <input
-        aria-invalid="false"
-        aria-label="Input"
-        class="pf-v5-c-form-control"
-        data-ouia-component-id="OUIA-Generated-TextInputBase-5"
-        data-ouia-component-type="PF4/TextInput"
-        data-ouia-safe="true"
-        readonly=""
-        type="number"
-        value="90"
-      />
-      <button
-        aria-disabled="false"
-        aria-label="Plus"
-        class="pf-v5-c-button pf-m-control"
-        data-ouia-component-id="OUIA-Generated-Button-control-10"
-        data-ouia-component-type="PF4/Button"
-        data-ouia-safe="true"
-        type="button"
-      >
-        <span
-          class="pf-v5-c-number-input__icon"
+            <svg
+              aria-hidden="true"
+              class="pf-v5-svg"
+              fill="currentColor"
+              role="img"
+              viewBox="0 0 448 512"
+            >
+              <path
+                d="M416 208H32c-17.67 0-32 14.33-32 32v32c0 17.67 14.33 32 32 32h384c17.67 0 32-14.33 32-32v-32c0-17.67-14.33-32-32-32z"
+              />
+            </svg>
+          </span>
+        </button>
+      </div>
+      <div
+        class="pf-v5-c-input-group__item"
+      >
+        <input
+          aria-invalid="false"
+          aria-label="Input"
+          class="pf-v5-c-form-control"
+          data-ouia-component-id="OUIA-Generated-TextInputBase-5"
+          data-ouia-component-type="PF4/TextInput"
+          data-ouia-safe="true"
+          readonly=""
+          type="number"
+          value="90"
+        />
+      </div>
+      <div
+        class="pf-v5-c-input-group__item"
+      >
+        <button
+          aria-disabled="false"
+          aria-label="Plus"
+          class="pf-v5-c-button pf-m-control"
+          data-ouia-component-id="OUIA-Generated-Button-control-10"
+          data-ouia-component-type="PF4/Button"
+          data-ouia-safe="true"
+          type="button"
         >
-          <svg
-            aria-hidden="true"
-            class="pf-v5-svg"
-            fill="currentColor"
-            role="img"
-            viewBox="0 0 448 512"
+          <span
+            class="pf-v5-c-number-input__icon"
           >
-            <path
-              d="M416 208H272V64c0-17.67-14.33-32-32-32h-32c-17.67 0-32 14.33-32 32v144H32c-17.67 0-32 14.33-32 32v32c0 17.67 14.33 32 32 32h144v144c0 17.67 14.33 32 32 32h32c17.67 0 32-14.33 32-32V304h144c17.67 0 32-14.33 32-32v-32c0-17.67-14.33-32-32-32z"
-            />
-          </svg>
-        </span>
-      </button>
+            <svg
+              aria-hidden="true"
+              class="pf-v5-svg"
+              fill="currentColor"
+              role="img"
+              viewBox="0 0 448 512"
+            >
+              <path
+                d="M416 208H272V64c0-17.67-14.33-32-32-32h-32c-17.67 0-32 14.33-32 32v144H32c-17.67 0-32 14.33-32 32v32c0 17.67 14.33 32 32 32h144v144c0 17.67 14.33 32 32 32h32c17.67 0 32-14.33 32-32V304h144c17.67 0 32-14.33 32-32v-32c0-17.67-14.33-32-32-32z"
+              />
+            </svg>
+          </span>
+        </button>
+      </div>
     </div>
   </div>
 </DocumentFragment>
@@ -915,67 +1059,79 @@ exports[`numberInput renders warning validated 1`] = `
     <div
       class="pf-v5-c-input-group"
     >
-      <button
-        aria-disabled="false"
-        aria-label="Minus"
-        class="pf-v5-c-button pf-m-control"
-        data-ouia-component-id="OUIA-Generated-Button-control-7"
-        data-ouia-component-type="PF4/Button"
-        data-ouia-safe="true"
-        type="button"
-      >
-        <span
-          class="pf-v5-c-number-input__icon"
+      <div
+        class="pf-v5-c-input-group__item"
+      >
+        <button
+          aria-disabled="false"
+          aria-label="Minus"
+          class="pf-v5-c-button pf-m-control"
+          data-ouia-component-id="OUIA-Generated-Button-control-7"
+          data-ouia-component-type="PF4/Button"
+          data-ouia-safe="true"
+          type="button"
         >
-          <svg
-            aria-hidden="true"
-            class="pf-v5-svg"
-            fill="currentColor"
-            role="img"
-            viewBox="0 0 448 512"
+          <span
+            class="pf-v5-c-number-input__icon"
           >
-            <path
-              d="M416 208H32c-17.67 0-32 14.33-32 32v32c0 17.67 14.33 32 32 32h384c17.67 0 32-14.33 32-32v-32c0-17.67-14.33-32-32-32z"
-            />
-          </svg>
-        </span>
-      </button>
-      <input
-        aria-invalid="false"
-        aria-label="Input"
-        class="pf-v5-c-form-control pf-m-warning"
-        data-ouia-component-id="OUIA-Generated-TextInputBase-4"
-        data-ouia-component-type="PF4/TextInput"
-        data-ouia-safe="true"
-        readonly=""
-        type="number"
-        value="0"
-      />
-      <button
-        aria-disabled="false"
-        aria-label="Plus"
-        class="pf-v5-c-button pf-m-control"
-        data-ouia-component-id="OUIA-Generated-Button-control-8"
-        data-ouia-component-type="PF4/Button"
-        data-ouia-safe="true"
-        type="button"
-      >
-        <span
-          class="pf-v5-c-number-input__icon"
+            <svg
+              aria-hidden="true"
+              class="pf-v5-svg"
+              fill="currentColor"
+              role="img"
+              viewBox="0 0 448 512"
+            >
+              <path
+                d="M416 208H32c-17.67 0-32 14.33-32 32v32c0 17.67 14.33 32 32 32h384c17.67 0 32-14.33 32-32v-32c0-17.67-14.33-32-32-32z"
+              />
+            </svg>
+          </span>
+        </button>
+      </div>
+      <div
+        class="pf-v5-c-input-group__item"
+      >
+        <input
+          aria-invalid="false"
+          aria-label="Input"
+          class="pf-v5-c-form-control pf-m-warning"
+          data-ouia-component-id="OUIA-Generated-TextInputBase-4"
+          data-ouia-component-type="PF4/TextInput"
+          data-ouia-safe="true"
+          readonly=""
+          type="number"
+          value="0"
+        />
+      </div>
+      <div
+        class="pf-v5-c-input-group__item"
+      >
+        <button
+          aria-disabled="false"
+          aria-label="Plus"
+          class="pf-v5-c-button pf-m-control"
+          data-ouia-component-id="OUIA-Generated-Button-control-8"
+          data-ouia-component-type="PF4/Button"
+          data-ouia-safe="true"
+          type="button"
         >
-          <svg
-            aria-hidden="true"
-            class="pf-v5-svg"
-            fill="currentColor"
-            role="img"
-            viewBox="0 0 448 512"
+          <span
+            class="pf-v5-c-number-input__icon"
           >
-            <path
-              d="M416 208H272V64c0-17.67-14.33-32-32-32h-32c-17.67 0-32 14.33-32 32v144H32c-17.67 0-32 14.33-32 32v32c0 17.67 14.33 32 32 32h144v144c0 17.67 14.33 32 32 32h32c17.67 0 32-14.33 32-32V304h144c17.67 0 32-14.33 32-32v-32c0-17.67-14.33-32-32-32z"
-            />
-          </svg>
-        </span>
-      </button>
+            <svg
+              aria-hidden="true"
+              class="pf-v5-svg"
+              fill="currentColor"
+              role="img"
+              viewBox="0 0 448 512"
+            >
+              <path
+                d="M416 208H272V64c0-17.67-14.33-32-32-32h-32c-17.67 0-32 14.33-32 32v144H32c-17.67 0-32 14.33-32 32v32c0 17.67 14.33 32 32 32h144v144c0 17.67 14.33 32 32 32h32c17.67 0 32-14.33 32-32V304h144c17.67 0 32-14.33 32-32v-32c0-17.67-14.33-32-32-32z"
+              />
+            </svg>
+          </span>
+        </button>
+      </div>
     </div>
   </div>
 </DocumentFragment>
diff --git a/packages/react-core/src/components/SearchInput/SearchInput.tsx b/packages/react-core/src/components/SearchInput/SearchInput.tsx
index 088039ad867..673af7b0624 100644
--- a/packages/react-core/src/components/SearchInput/SearchInput.tsx
+++ b/packages/react-core/src/components/SearchInput/SearchInput.tsx
@@ -10,7 +10,7 @@ import CaretDownIcon from '@patternfly/react-icons/dist/esm/icons/caret-down-ico
 import ArrowRightIcon from '@patternfly/react-icons/dist/esm/icons/arrow-right-icon';
 import { AdvancedSearchMenu } from './AdvancedSearchMenu';
 import { TextInputGroup, TextInputGroupMain, TextInputGroupUtilities } from '../TextInputGroup';
-import { InputGroup } from '../InputGroup';
+import { InputGroup, InputGroupItem } from '../InputGroup';
 import { Popper } from '../../helpers';
 
 /** Properties for adding search attributes to an advanced search input. These properties must
@@ -344,8 +344,8 @@ const SearchInputBase: React.FunctionComponent<SearchInputProps> = ({
 
   const buildExpandableSearchInput = ({ ...searchInputProps } = {}) => (
     <InputGroup {...searchInputProps}>
-      {buildTextInputGroup()}
-      {expandableToggle}
+      <InputGroupItem isFill>{buildTextInputGroup()} </InputGroupItem>
+      <InputGroupItem isPlain>{expandableToggle}</InputGroupItem>
     </InputGroup>
   );
 
@@ -359,31 +359,35 @@ const SearchInputBase: React.FunctionComponent<SearchInputProps> = ({
 
   const buildSearchTextInputGroupWithExtraButtons = ({ ...searchInputProps } = {}) => (
     <InputGroup ref={triggerRef} {...searchInputProps}>
-      {buildTextInputGroup()}
+      <InputGroupItem isFill>{buildTextInputGroup()}</InputGroupItem>
       {(attributes.length > 0 || onToggleAdvancedSearch) && (
-        <Button
-          className={isSearchMenuOpen && 'pf-m-expanded'}
-          variant={ButtonVariant.control}
-          aria-label={openMenuButtonAriaLabel}
-          onClick={onToggle}
-          isDisabled={isDisabled}
-          aria-expanded={isSearchMenuOpen}
-        >
-          <CaretDownIcon />
-        </Button>
+        <InputGroupItem isPlain>
+          <Button
+            className={isSearchMenuOpen && 'pf-m-expanded'}
+            variant={ButtonVariant.control}
+            aria-label={openMenuButtonAriaLabel}
+            onClick={onToggle}
+            isDisabled={isDisabled}
+            aria-expanded={isSearchMenuOpen}
+          >
+            <CaretDownIcon />
+          </Button>
+        </InputGroupItem>
       )}
       {!!onSearch && (
-        <Button
-          type="submit"
-          variant={ButtonVariant.control}
-          aria-label={submitSearchButtonLabel}
-          onClick={onSearchHandler}
-          isDisabled={isDisabled}
-        >
-          <ArrowRightIcon />
-        </Button>
+        <InputGroupItem isPlain>
+          <Button
+            type="submit"
+            variant={ButtonVariant.control}
+            aria-label={submitSearchButtonLabel}
+            onClick={onSearchHandler}
+            isDisabled={isDisabled}
+          >
+            <ArrowRightIcon />
+          </Button>
+        </InputGroupItem>
       )}
-      {expandableInput && expandableToggle}
+      {expandableInput && <InputGroupItem>{expandableToggle}</InputGroupItem>}
     </InputGroup>
   );
 
@@ -394,7 +398,7 @@ const SearchInputBase: React.FunctionComponent<SearchInputProps> = ({
   };
 
   if (!!expandableInput && !isExpanded) {
-    return <InputGroup {...searchInputProps}>{expandableToggle}</InputGroup>;
+    return <InputGroup {...searchInputProps}><InputGroupItem>{expandableToggle}</InputGroupItem></InputGroup>;
   }
 
   if (!!onSearch || attributes.length > 0 || !!onToggleAdvancedSearch) {
diff --git a/packages/react-core/src/components/SearchInput/__tests__/__snapshots__/SearchInput.test.tsx.snap b/packages/react-core/src/components/SearchInput/__tests__/__snapshots__/SearchInput.test.tsx.snap
index 089d922c521..ed7832d31a4 100644
--- a/packages/react-core/src/components/SearchInput/__tests__/__snapshots__/SearchInput.test.tsx.snap
+++ b/packages/react-core/src/components/SearchInput/__tests__/__snapshots__/SearchInput.test.tsx.snap
@@ -9,106 +9,118 @@ exports[`SearchInput advanced search 1`] = `
       class="pf-v5-c-input-group"
     >
       <div
-        class="pf-v5-c-text-input-group"
+        class="pf-v5-c-input-group__item pf-m-fill"
       >
         <div
-          class="pf-v5-c-text-input-group__main pf-m-icon"
+          class="pf-v5-c-text-input-group"
         >
-          <span
-            class="pf-v5-c-text-input-group__text"
+          <div
+            class="pf-v5-c-text-input-group__main pf-m-icon"
           >
             <span
-              class="pf-v5-c-text-input-group__icon"
+              class="pf-v5-c-text-input-group__text"
+            >
+              <span
+                class="pf-v5-c-text-input-group__icon"
+              >
+                <svg
+                  aria-hidden="true"
+                  class="pf-v5-svg"
+                  fill="currentColor"
+                  role="img"
+                  viewBox="0 0 512 512"
+                >
+                  <path
+                    d="M505 442.7L405.3 343c-4.5-4.5-10.6-7-17-7H372c27.6-35.3 44-79.7 44-128C416 93.1 322.9 0 208 0S0 93.1 0 208s93.1 208 208 208c48.3 0 92.7-16.4 128-44v16.3c0 6.4 2.5 12.5 7 17l99.7 99.7c9.4 9.4 24.6 9.4 33.9 0l28.3-28.3c9.4-9.4 9.4-24.6.1-34zM208 336c-70.7 0-128-57.2-128-128 0-70.7 57.2-128 128-128 70.7 0 128 57.2 128 128 0 70.7-57.2 128-128 128z"
+                  />
+                </svg>
+              </span>
+              <input
+                aria-label="Search input"
+                class="pf-v5-c-text-input-group__text-input"
+                type="text"
+                value="username:player firstname:john"
+              />
+            </span>
+          </div>
+          <div
+            class="pf-v5-c-text-input-group__utilities"
+          >
+            <button
+              aria-disabled="false"
+              aria-label="Reset"
+              class="pf-v5-c-button pf-m-plain"
+              data-ouia-component-id="OUIA-Generated-Button-plain-17"
+              data-ouia-component-type="PF4/Button"
+              data-ouia-safe="true"
+              type="button"
             >
               <svg
                 aria-hidden="true"
                 class="pf-v5-svg"
                 fill="currentColor"
                 role="img"
-                viewBox="0 0 512 512"
+                viewBox="0 0 352 512"
               >
                 <path
-                  d="M505 442.7L405.3 343c-4.5-4.5-10.6-7-17-7H372c27.6-35.3 44-79.7 44-128C416 93.1 322.9 0 208 0S0 93.1 0 208s93.1 208 208 208c48.3 0 92.7-16.4 128-44v16.3c0 6.4 2.5 12.5 7 17l99.7 99.7c9.4 9.4 24.6 9.4 33.9 0l28.3-28.3c9.4-9.4 9.4-24.6.1-34zM208 336c-70.7 0-128-57.2-128-128 0-70.7 57.2-128 128-128 70.7 0 128 57.2 128 128 0 70.7-57.2 128-128 128z"
+                  d="M242.72 256l100.07-100.07c12.28-12.28 12.28-32.19 0-44.48l-22.24-22.24c-12.28-12.28-32.19-12.28-44.48 0L176 189.28 75.93 89.21c-12.28-12.28-32.19-12.28-44.48 0L9.21 111.45c-12.28 12.28-12.28 32.19 0 44.48L109.28 256 9.21 356.07c-12.28 12.28-12.28 32.19 0 44.48l22.24 22.24c12.28 12.28 32.2 12.28 44.48 0L176 322.72l100.07 100.07c12.28 12.28 32.2 12.28 44.48 0l22.24-22.24c12.28-12.28 12.28-32.19 0-44.48L242.72 256z"
                 />
               </svg>
-            </span>
-            <input
-              aria-label="Search input"
-              class="pf-v5-c-text-input-group__text-input"
-              type="text"
-              value="username:player firstname:john"
-            />
-          </span>
-        </div>
-        <div
-          class="pf-v5-c-text-input-group__utilities"
-        >
-          <button
-            aria-disabled="false"
-            aria-label="Reset"
-            class="pf-v5-c-button pf-m-plain"
-            data-ouia-component-id="OUIA-Generated-Button-plain-17"
-            data-ouia-component-type="PF4/Button"
-            data-ouia-safe="true"
-            type="button"
-          >
-            <svg
-              aria-hidden="true"
-              class="pf-v5-svg"
-              fill="currentColor"
-              role="img"
-              viewBox="0 0 352 512"
-            >
-              <path
-                d="M242.72 256l100.07-100.07c12.28-12.28 12.28-32.19 0-44.48l-22.24-22.24c-12.28-12.28-32.19-12.28-44.48 0L176 189.28 75.93 89.21c-12.28-12.28-32.19-12.28-44.48 0L9.21 111.45c-12.28 12.28-12.28 32.19 0 44.48L109.28 256 9.21 356.07c-12.28 12.28-12.28 32.19 0 44.48l22.24 22.24c12.28 12.28 32.2 12.28 44.48 0L176 322.72l100.07 100.07c12.28 12.28 32.2 12.28 44.48 0l22.24-22.24c12.28-12.28 12.28-32.19 0-44.48L242.72 256z"
-              />
-            </svg>
-          </button>
+            </button>
+          </div>
         </div>
       </div>
-      <button
-        aria-disabled="false"
-        aria-expanded="false"
-        aria-label="Open advanced search"
-        class="pf-v5-c-button pf-m-control"
-        data-ouia-component-id="OUIA-Generated-Button-control-10"
-        data-ouia-component-type="PF4/Button"
-        data-ouia-safe="true"
-        type="button"
+      <div
+        class="pf-v5-c-input-group__item pf-m-plain"
       >
-        <svg
-          aria-hidden="true"
-          class="pf-v5-svg"
-          fill="currentColor"
-          role="img"
-          viewBox="0 0 320 512"
+        <button
+          aria-disabled="false"
+          aria-expanded="false"
+          aria-label="Open advanced search"
+          class="pf-v5-c-button pf-m-control"
+          data-ouia-component-id="OUIA-Generated-Button-control-10"
+          data-ouia-component-type="PF4/Button"
+          data-ouia-safe="true"
+          type="button"
         >
-          <path
-            d="M31.3 192h257.3c17.8 0 26.7 21.5 14.1 34.1L174.1 354.8c-7.8 7.8-20.5 7.8-28.3 0L17.2 226.1C4.6 213.5 13.5 192 31.3 192z"
-          />
-        </svg>
-      </button>
-      <button
-        aria-disabled="false"
-        aria-label="Search"
-        class="pf-v5-c-button pf-m-control"
-        data-ouia-component-id="OUIA-Generated-Button-control-11"
-        data-ouia-component-type="PF4/Button"
-        data-ouia-safe="true"
-        type="submit"
+          <svg
+            aria-hidden="true"
+            class="pf-v5-svg"
+            fill="currentColor"
+            role="img"
+            viewBox="0 0 320 512"
+          >
+            <path
+              d="M31.3 192h257.3c17.8 0 26.7 21.5 14.1 34.1L174.1 354.8c-7.8 7.8-20.5 7.8-28.3 0L17.2 226.1C4.6 213.5 13.5 192 31.3 192z"
+            />
+          </svg>
+        </button>
+      </div>
+      <div
+        class="pf-v5-c-input-group__item pf-m-plain"
       >
-        <svg
-          aria-hidden="true"
-          class="pf-v5-svg"
-          fill="currentColor"
-          role="img"
-          viewBox="0 0 448 512"
+        <button
+          aria-disabled="false"
+          aria-label="Search"
+          class="pf-v5-c-button pf-m-control"
+          data-ouia-component-id="OUIA-Generated-Button-control-11"
+          data-ouia-component-type="PF4/Button"
+          data-ouia-safe="true"
+          type="submit"
         >
-          <path
-            d="M190.5 66.9l22.2-22.2c9.4-9.4 24.6-9.4 33.9 0L441 239c9.4 9.4 9.4 24.6 0 33.9L246.6 467.3c-9.4 9.4-24.6 9.4-33.9 0l-22.2-22.2c-9.5-9.5-9.3-25 .4-34.3L311.4 296H24c-13.3 0-24-10.7-24-24v-32c0-13.3 10.7-24 24-24h287.4L190.9 101.2c-9.8-9.3-10-24.8-.4-34.3z"
-          />
-        </svg>
-      </button>
+          <svg
+            aria-hidden="true"
+            class="pf-v5-svg"
+            fill="currentColor"
+            role="img"
+            viewBox="0 0 448 512"
+          >
+            <path
+              d="M190.5 66.9l22.2-22.2c9.4-9.4 24.6-9.4 33.9 0L441 239c9.4 9.4 9.4 24.6 0 33.9L246.6 467.3c-9.4 9.4-24.6 9.4-33.9 0l-22.2-22.2c-9.5-9.5-9.3-25 .4-34.3L311.4 296H24c-13.3 0-24-10.7-24-24v-32c0-13.3 10.7-24 24-24h287.4L190.9 101.2c-9.8-9.3-10-24.8-.4-34.3z"
+            />
+          </svg>
+        </button>
+      </div>
     </div>
   </div>
 </DocumentFragment>
@@ -124,106 +136,118 @@ exports[`SearchInput advanced search with custom attributes 1`] = `
       class="pf-v5-c-input-group"
     >
       <div
-        class="pf-v5-c-text-input-group"
+        class="pf-v5-c-input-group__item pf-m-fill"
       >
         <div
-          class="pf-v5-c-text-input-group__main pf-m-icon"
+          class="pf-v5-c-text-input-group"
         >
-          <span
-            class="pf-v5-c-text-input-group__text"
+          <div
+            class="pf-v5-c-text-input-group__main pf-m-icon"
           >
             <span
-              class="pf-v5-c-text-input-group__icon"
+              class="pf-v5-c-text-input-group__text"
+            >
+              <span
+                class="pf-v5-c-text-input-group__icon"
+              >
+                <svg
+                  aria-hidden="true"
+                  class="pf-v5-svg"
+                  fill="currentColor"
+                  role="img"
+                  viewBox="0 0 512 512"
+                >
+                  <path
+                    d="M505 442.7L405.3 343c-4.5-4.5-10.6-7-17-7H372c27.6-35.3 44-79.7 44-128C416 93.1 322.9 0 208 0S0 93.1 0 208s93.1 208 208 208c48.3 0 92.7-16.4 128-44v16.3c0 6.4 2.5 12.5 7 17l99.7 99.7c9.4 9.4 24.6 9.4 33.9 0l28.3-28.3c9.4-9.4 9.4-24.6.1-34zM208 336c-70.7 0-128-57.2-128-128 0-70.7 57.2-128 128-128 70.7 0 128 57.2 128 128 0 70.7-57.2 128-128 128z"
+                  />
+                </svg>
+              </span>
+              <input
+                aria-label="Search input"
+                class="pf-v5-c-text-input-group__text-input"
+                type="text"
+                value="username:player firstname:john"
+              />
+            </span>
+          </div>
+          <div
+            class="pf-v5-c-text-input-group__utilities"
+          >
+            <button
+              aria-disabled="false"
+              aria-label="Reset"
+              class="pf-v5-c-button pf-m-plain"
+              data-ouia-component-id="OUIA-Generated-Button-plain-18"
+              data-ouia-component-type="PF4/Button"
+              data-ouia-safe="true"
+              type="button"
             >
               <svg
                 aria-hidden="true"
                 class="pf-v5-svg"
                 fill="currentColor"
                 role="img"
-                viewBox="0 0 512 512"
+                viewBox="0 0 352 512"
               >
                 <path
-                  d="M505 442.7L405.3 343c-4.5-4.5-10.6-7-17-7H372c27.6-35.3 44-79.7 44-128C416 93.1 322.9 0 208 0S0 93.1 0 208s93.1 208 208 208c48.3 0 92.7-16.4 128-44v16.3c0 6.4 2.5 12.5 7 17l99.7 99.7c9.4 9.4 24.6 9.4 33.9 0l28.3-28.3c9.4-9.4 9.4-24.6.1-34zM208 336c-70.7 0-128-57.2-128-128 0-70.7 57.2-128 128-128 70.7 0 128 57.2 128 128 0 70.7-57.2 128-128 128z"
+                  d="M242.72 256l100.07-100.07c12.28-12.28 12.28-32.19 0-44.48l-22.24-22.24c-12.28-12.28-32.19-12.28-44.48 0L176 189.28 75.93 89.21c-12.28-12.28-32.19-12.28-44.48 0L9.21 111.45c-12.28 12.28-12.28 32.19 0 44.48L109.28 256 9.21 356.07c-12.28 12.28-12.28 32.19 0 44.48l22.24 22.24c12.28 12.28 32.2 12.28 44.48 0L176 322.72l100.07 100.07c12.28 12.28 32.2 12.28 44.48 0l22.24-22.24c12.28-12.28 12.28-32.19 0-44.48L242.72 256z"
                 />
               </svg>
-            </span>
-            <input
-              aria-label="Search input"
-              class="pf-v5-c-text-input-group__text-input"
-              type="text"
-              value="username:player firstname:john"
-            />
-          </span>
-        </div>
-        <div
-          class="pf-v5-c-text-input-group__utilities"
-        >
-          <button
-            aria-disabled="false"
-            aria-label="Reset"
-            class="pf-v5-c-button pf-m-plain"
-            data-ouia-component-id="OUIA-Generated-Button-plain-18"
-            data-ouia-component-type="PF4/Button"
-            data-ouia-safe="true"
-            type="button"
-          >
-            <svg
-              aria-hidden="true"
-              class="pf-v5-svg"
-              fill="currentColor"
-              role="img"
-              viewBox="0 0 352 512"
-            >
-              <path
-                d="M242.72 256l100.07-100.07c12.28-12.28 12.28-32.19 0-44.48l-22.24-22.24c-12.28-12.28-32.19-12.28-44.48 0L176 189.28 75.93 89.21c-12.28-12.28-32.19-12.28-44.48 0L9.21 111.45c-12.28 12.28-12.28 32.19 0 44.48L109.28 256 9.21 356.07c-12.28 12.28-12.28 32.19 0 44.48l22.24 22.24c12.28 12.28 32.2 12.28 44.48 0L176 322.72l100.07 100.07c12.28 12.28 32.2 12.28 44.48 0l22.24-22.24c12.28-12.28 12.28-32.19 0-44.48L242.72 256z"
-              />
-            </svg>
-          </button>
+            </button>
+          </div>
         </div>
       </div>
-      <button
-        aria-disabled="false"
-        aria-expanded="true"
-        aria-label="Open advanced search"
-        class="pf-v5-c-button pf-m-control pf-m-expanded"
-        data-ouia-component-id="OUIA-Generated-Button-control-12"
-        data-ouia-component-type="PF4/Button"
-        data-ouia-safe="true"
-        type="button"
+      <div
+        class="pf-v5-c-input-group__item pf-m-plain"
       >
-        <svg
-          aria-hidden="true"
-          class="pf-v5-svg"
-          fill="currentColor"
-          role="img"
-          viewBox="0 0 320 512"
+        <button
+          aria-disabled="false"
+          aria-expanded="true"
+          aria-label="Open advanced search"
+          class="pf-v5-c-button pf-m-control pf-m-expanded"
+          data-ouia-component-id="OUIA-Generated-Button-control-12"
+          data-ouia-component-type="PF4/Button"
+          data-ouia-safe="true"
+          type="button"
         >
-          <path
-            d="M31.3 192h257.3c17.8 0 26.7 21.5 14.1 34.1L174.1 354.8c-7.8 7.8-20.5 7.8-28.3 0L17.2 226.1C4.6 213.5 13.5 192 31.3 192z"
-          />
-        </svg>
-      </button>
-      <button
-        aria-disabled="false"
-        aria-label="Search"
-        class="pf-v5-c-button pf-m-control"
-        data-ouia-component-id="OUIA-Generated-Button-control-13"
-        data-ouia-component-type="PF4/Button"
-        data-ouia-safe="true"
-        type="submit"
+          <svg
+            aria-hidden="true"
+            class="pf-v5-svg"
+            fill="currentColor"
+            role="img"
+            viewBox="0 0 320 512"
+          >
+            <path
+              d="M31.3 192h257.3c17.8 0 26.7 21.5 14.1 34.1L174.1 354.8c-7.8 7.8-20.5 7.8-28.3 0L17.2 226.1C4.6 213.5 13.5 192 31.3 192z"
+            />
+          </svg>
+        </button>
+      </div>
+      <div
+        class="pf-v5-c-input-group__item pf-m-plain"
       >
-        <svg
-          aria-hidden="true"
-          class="pf-v5-svg"
-          fill="currentColor"
-          role="img"
-          viewBox="0 0 448 512"
+        <button
+          aria-disabled="false"
+          aria-label="Search"
+          class="pf-v5-c-button pf-m-control"
+          data-ouia-component-id="OUIA-Generated-Button-control-13"
+          data-ouia-component-type="PF4/Button"
+          data-ouia-safe="true"
+          type="submit"
         >
-          <path
-            d="M190.5 66.9l22.2-22.2c9.4-9.4 24.6-9.4 33.9 0L441 239c9.4 9.4 9.4 24.6 0 33.9L246.6 467.3c-9.4 9.4-24.6 9.4-33.9 0l-22.2-22.2c-9.5-9.5-9.3-25 .4-34.3L311.4 296H24c-13.3 0-24-10.7-24-24v-32c0-13.3 10.7-24 24-24h287.4L190.9 101.2c-9.8-9.3-10-24.8-.4-34.3z"
-          />
-        </svg>
-      </button>
+          <svg
+            aria-hidden="true"
+            class="pf-v5-svg"
+            fill="currentColor"
+            role="img"
+            viewBox="0 0 448 512"
+          >
+            <path
+              d="M190.5 66.9l22.2-22.2c9.4-9.4 24.6-9.4 33.9 0L441 239c9.4 9.4 9.4 24.6 0 33.9L246.6 467.3c-9.4 9.4-24.6 9.4-33.9 0l-22.2-22.2c-9.5-9.5-9.3-25 .4-34.3L311.4 296H24c-13.3 0-24-10.7-24-24v-32c0-13.3 10.7-24 24-24h287.4L190.9 101.2c-9.8-9.3-10-24.8-.4-34.3z"
+            />
+          </svg>
+        </button>
+      </div>
     </div>
     <div
       class=""
@@ -427,106 +451,118 @@ exports[`SearchInput renders search input in strict mode 1`] = `
       class="pf-v5-c-input-group"
     >
       <div
-        class="pf-v5-c-text-input-group"
+        class="pf-v5-c-input-group__item pf-m-fill"
       >
         <div
-          class="pf-v5-c-text-input-group__main pf-m-icon"
+          class="pf-v5-c-text-input-group"
         >
-          <span
-            class="pf-v5-c-text-input-group__text"
+          <div
+            class="pf-v5-c-text-input-group__main pf-m-icon"
           >
             <span
-              class="pf-v5-c-text-input-group__icon"
+              class="pf-v5-c-text-input-group__text"
+            >
+              <span
+                class="pf-v5-c-text-input-group__icon"
+              >
+                <svg
+                  aria-hidden="true"
+                  class="pf-v5-svg"
+                  fill="currentColor"
+                  role="img"
+                  viewBox="0 0 512 512"
+                >
+                  <path
+                    d="M505 442.7L405.3 343c-4.5-4.5-10.6-7-17-7H372c27.6-35.3 44-79.7 44-128C416 93.1 322.9 0 208 0S0 93.1 0 208s93.1 208 208 208c48.3 0 92.7-16.4 128-44v16.3c0 6.4 2.5 12.5 7 17l99.7 99.7c9.4 9.4 24.6 9.4 33.9 0l28.3-28.3c9.4-9.4 9.4-24.6.1-34zM208 336c-70.7 0-128-57.2-128-128 0-70.7 57.2-128 128-128 70.7 0 128 57.2 128 128 0 70.7-57.2 128-128 128z"
+                  />
+                </svg>
+              </span>
+              <input
+                aria-label="Search input"
+                class="pf-v5-c-text-input-group__text-input"
+                type="text"
+                value="username:player firstname:john"
+              />
+            </span>
+          </div>
+          <div
+            class="pf-v5-c-text-input-group__utilities"
+          >
+            <button
+              aria-disabled="false"
+              aria-label="Reset"
+              class="pf-v5-c-button pf-m-plain"
+              data-ouia-component-id="OUIA-Generated-Button-plain-11"
+              data-ouia-component-type="PF4/Button"
+              data-ouia-safe="true"
+              type="button"
             >
               <svg
                 aria-hidden="true"
                 class="pf-v5-svg"
                 fill="currentColor"
                 role="img"
-                viewBox="0 0 512 512"
+                viewBox="0 0 352 512"
               >
                 <path
-                  d="M505 442.7L405.3 343c-4.5-4.5-10.6-7-17-7H372c27.6-35.3 44-79.7 44-128C416 93.1 322.9 0 208 0S0 93.1 0 208s93.1 208 208 208c48.3 0 92.7-16.4 128-44v16.3c0 6.4 2.5 12.5 7 17l99.7 99.7c9.4 9.4 24.6 9.4 33.9 0l28.3-28.3c9.4-9.4 9.4-24.6.1-34zM208 336c-70.7 0-128-57.2-128-128 0-70.7 57.2-128 128-128 70.7 0 128 57.2 128 128 0 70.7-57.2 128-128 128z"
+                  d="M242.72 256l100.07-100.07c12.28-12.28 12.28-32.19 0-44.48l-22.24-22.24c-12.28-12.28-32.19-12.28-44.48 0L176 189.28 75.93 89.21c-12.28-12.28-32.19-12.28-44.48 0L9.21 111.45c-12.28 12.28-12.28 32.19 0 44.48L109.28 256 9.21 356.07c-12.28 12.28-12.28 32.19 0 44.48l22.24 22.24c12.28 12.28 32.2 12.28 44.48 0L176 322.72l100.07 100.07c12.28 12.28 32.2 12.28 44.48 0l22.24-22.24c12.28-12.28 12.28-32.19 0-44.48L242.72 256z"
                 />
               </svg>
-            </span>
-            <input
-              aria-label="Search input"
-              class="pf-v5-c-text-input-group__text-input"
-              type="text"
-              value="username:player firstname:john"
-            />
-          </span>
-        </div>
-        <div
-          class="pf-v5-c-text-input-group__utilities"
-        >
-          <button
-            aria-disabled="false"
-            aria-label="Reset"
-            class="pf-v5-c-button pf-m-plain"
-            data-ouia-component-id="OUIA-Generated-Button-plain-11"
-            data-ouia-component-type="PF4/Button"
-            data-ouia-safe="true"
-            type="button"
-          >
-            <svg
-              aria-hidden="true"
-              class="pf-v5-svg"
-              fill="currentColor"
-              role="img"
-              viewBox="0 0 352 512"
-            >
-              <path
-                d="M242.72 256l100.07-100.07c12.28-12.28 12.28-32.19 0-44.48l-22.24-22.24c-12.28-12.28-32.19-12.28-44.48 0L176 189.28 75.93 89.21c-12.28-12.28-32.19-12.28-44.48 0L9.21 111.45c-12.28 12.28-12.28 32.19 0 44.48L109.28 256 9.21 356.07c-12.28 12.28-12.28 32.19 0 44.48l22.24 22.24c12.28 12.28 32.2 12.28 44.48 0L176 322.72l100.07 100.07c12.28 12.28 32.2 12.28 44.48 0l22.24-22.24c12.28-12.28 12.28-32.19 0-44.48L242.72 256z"
-              />
-            </svg>
-          </button>
+            </button>
+          </div>
         </div>
       </div>
-      <button
-        aria-disabled="false"
-        aria-expanded="false"
-        aria-label="Open advanced search"
-        class="pf-v5-c-button pf-m-control"
-        data-ouia-component-id="OUIA-Generated-Button-control-5"
-        data-ouia-component-type="PF4/Button"
-        data-ouia-safe="true"
-        type="button"
+      <div
+        class="pf-v5-c-input-group__item pf-m-plain"
       >
-        <svg
-          aria-hidden="true"
-          class="pf-v5-svg"
-          fill="currentColor"
-          role="img"
-          viewBox="0 0 320 512"
+        <button
+          aria-disabled="false"
+          aria-expanded="false"
+          aria-label="Open advanced search"
+          class="pf-v5-c-button pf-m-control"
+          data-ouia-component-id="OUIA-Generated-Button-control-5"
+          data-ouia-component-type="PF4/Button"
+          data-ouia-safe="true"
+          type="button"
         >
-          <path
-            d="M31.3 192h257.3c17.8 0 26.7 21.5 14.1 34.1L174.1 354.8c-7.8 7.8-20.5 7.8-28.3 0L17.2 226.1C4.6 213.5 13.5 192 31.3 192z"
-          />
-        </svg>
-      </button>
-      <button
-        aria-disabled="false"
-        aria-label="Search"
-        class="pf-v5-c-button pf-m-control"
-        data-ouia-component-id="OUIA-Generated-Button-control-7"
-        data-ouia-component-type="PF4/Button"
-        data-ouia-safe="true"
-        type="submit"
+          <svg
+            aria-hidden="true"
+            class="pf-v5-svg"
+            fill="currentColor"
+            role="img"
+            viewBox="0 0 320 512"
+          >
+            <path
+              d="M31.3 192h257.3c17.8 0 26.7 21.5 14.1 34.1L174.1 354.8c-7.8 7.8-20.5 7.8-28.3 0L17.2 226.1C4.6 213.5 13.5 192 31.3 192z"
+            />
+          </svg>
+        </button>
+      </div>
+      <div
+        class="pf-v5-c-input-group__item pf-m-plain"
       >
-        <svg
-          aria-hidden="true"
-          class="pf-v5-svg"
-          fill="currentColor"
-          role="img"
-          viewBox="0 0 448 512"
+        <button
+          aria-disabled="false"
+          aria-label="Search"
+          class="pf-v5-c-button pf-m-control"
+          data-ouia-component-id="OUIA-Generated-Button-control-7"
+          data-ouia-component-type="PF4/Button"
+          data-ouia-safe="true"
+          type="submit"
         >
-          <path
-            d="M190.5 66.9l22.2-22.2c9.4-9.4 24.6-9.4 33.9 0L441 239c9.4 9.4 9.4 24.6 0 33.9L246.6 467.3c-9.4 9.4-24.6 9.4-33.9 0l-22.2-22.2c-9.5-9.5-9.3-25 .4-34.3L311.4 296H24c-13.3 0-24-10.7-24-24v-32c0-13.3 10.7-24 24-24h287.4L190.9 101.2c-9.8-9.3-10-24.8-.4-34.3z"
-          />
-        </svg>
-      </button>
+          <svg
+            aria-hidden="true"
+            class="pf-v5-svg"
+            fill="currentColor"
+            role="img"
+            viewBox="0 0 448 512"
+          >
+            <path
+              d="M190.5 66.9l22.2-22.2c9.4-9.4 24.6-9.4 33.9 0L441 239c9.4 9.4 9.4 24.6 0 33.9L246.6 467.3c-9.4 9.4-24.6 9.4-33.9 0l-22.2-22.2c-9.5-9.5-9.3-25 .4-34.3L311.4 296H24c-13.3 0-24-10.7-24-24v-32c0-13.3 10.7-24 24-24h287.4L190.9 101.2c-9.8-9.3-10-24.8-.4-34.3z"
+            />
+          </svg>
+        </button>
+      </div>
     </div>
   </div>
 </DocumentFragment>
@@ -538,76 +574,101 @@ exports[`SearchInput search input with hint 1`] = `
     class="pf-v5-c-input-group"
   >
     <div
-      class="pf-v5-c-text-input-group"
+      class="pf-v5-c-input-group__item pf-m-fill"
     >
       <div
-        class="pf-v5-c-text-input-group__main pf-m-icon"
+        class="pf-v5-c-text-input-group"
       >
-        <span
-          class="pf-v5-c-text-input-group__text"
+        <div
+          class="pf-v5-c-text-input-group__main pf-m-icon"
         >
-          <input
-            aria-hidden="true"
-            class="pf-v5-c-text-input-group__text-input pf-m-hint"
-            disabled=""
-            type="text"
-            value="test hint"
-          />
           <span
-            class="pf-v5-c-text-input-group__icon"
+            class="pf-v5-c-text-input-group__text"
           >
-            <svg
+            <input
               aria-hidden="true"
-              class="pf-v5-svg"
-              fill="currentColor"
-              role="img"
-              viewBox="0 0 512 512"
+              class="pf-v5-c-text-input-group__text-input pf-m-hint"
+              disabled=""
+              type="text"
+              value="test hint"
+            />
+            <span
+              class="pf-v5-c-text-input-group__icon"
             >
-              <path
-                d="M505 442.7L405.3 343c-4.5-4.5-10.6-7-17-7H372c27.6-35.3 44-79.7 44-128C416 93.1 322.9 0 208 0S0 93.1 0 208s93.1 208 208 208c48.3 0 92.7-16.4 128-44v16.3c0 6.4 2.5 12.5 7 17l99.7 99.7c9.4 9.4 24.6 9.4 33.9 0l28.3-28.3c9.4-9.4 9.4-24.6.1-34zM208 336c-70.7 0-128-57.2-128-128 0-70.7 57.2-128 128-128 70.7 0 128 57.2 128 128 0 70.7-57.2 128-128 128z"
-              />
-            </svg>
+              <svg
+                aria-hidden="true"
+                class="pf-v5-svg"
+                fill="currentColor"
+                role="img"
+                viewBox="0 0 512 512"
+              >
+                <path
+                  d="M505 442.7L405.3 343c-4.5-4.5-10.6-7-17-7H372c27.6-35.3 44-79.7 44-128C416 93.1 322.9 0 208 0S0 93.1 0 208s93.1 208 208 208c48.3 0 92.7-16.4 128-44v16.3c0 6.4 2.5 12.5 7 17l99.7 99.7c9.4 9.4 24.6 9.4 33.9 0l28.3-28.3c9.4-9.4 9.4-24.6.1-34zM208 336c-70.7 0-128-57.2-128-128 0-70.7 57.2-128 128-128 70.7 0 128 57.2 128 128 0 70.7-57.2 128-128 128z"
+                />
+              </svg>
+            </span>
+            <input
+              aria-label="simple text input"
+              class="pf-v5-c-text-input-group__text-input"
+              type="text"
+              value="test input"
+            />
           </span>
-          <input
-            aria-label="simple text input"
-            class="pf-v5-c-text-input-group__text-input"
-            type="text"
-            value="test input"
-          />
-        </span>
-      </div>
-      <div
-        class="pf-v5-c-text-input-group__utilities"
-      >
+        </div>
         <div
-          class="pf-v5-c-text-input-group__group"
+          class="pf-v5-c-text-input-group__utilities"
         >
-          <button
-            aria-disabled="false"
-            aria-label="Previous"
-            class="pf-v5-c-button pf-m-plain"
-            data-ouia-component-id="OUIA-Generated-Button-plain-4"
-            data-ouia-component-type="PF4/Button"
-            data-ouia-safe="true"
-            type="button"
+          <div
+            class="pf-v5-c-text-input-group__group"
           >
-            <svg
-              aria-hidden="true"
-              class="pf-v5-svg"
-              fill="currentColor"
-              role="img"
-              viewBox="0 0 320 512"
+            <button
+              aria-disabled="false"
+              aria-label="Previous"
+              class="pf-v5-c-button pf-m-plain"
+              data-ouia-component-id="OUIA-Generated-Button-plain-4"
+              data-ouia-component-type="PF4/Button"
+              data-ouia-safe="true"
+              type="button"
             >
-              <path
-                d="M177 159.7l136 136c9.4 9.4 9.4 24.6 0 33.9l-22.6 22.6c-9.4 9.4-24.6 9.4-33.9 0L160 255.9l-96.4 96.4c-9.4 9.4-24.6 9.4-33.9 0L7 329.7c-9.4-9.4-9.4-24.6 0-33.9l136-136c9.4-9.5 24.6-9.5 34-.1z"
-              />
-            </svg>
-          </button>
+              <svg
+                aria-hidden="true"
+                class="pf-v5-svg"
+                fill="currentColor"
+                role="img"
+                viewBox="0 0 320 512"
+              >
+                <path
+                  d="M177 159.7l136 136c9.4 9.4 9.4 24.6 0 33.9l-22.6 22.6c-9.4 9.4-24.6 9.4-33.9 0L160 255.9l-96.4 96.4c-9.4 9.4-24.6 9.4-33.9 0L7 329.7c-9.4-9.4-9.4-24.6 0-33.9l136-136c9.4-9.5 24.6-9.5 34-.1z"
+                />
+              </svg>
+            </button>
+            <button
+              aria-disabled="false"
+              aria-label="Next"
+              class="pf-v5-c-button pf-m-plain"
+              data-ouia-component-id="OUIA-Generated-Button-plain-5"
+              data-ouia-component-type="PF4/Button"
+              data-ouia-safe="true"
+              type="button"
+            >
+              <svg
+                aria-hidden="true"
+                class="pf-v5-svg"
+                fill="currentColor"
+                role="img"
+                viewBox="0 0 320 512"
+              >
+                <path
+                  d="M143 352.3L7 216.3c-9.4-9.4-9.4-24.6 0-33.9l22.6-22.6c9.4-9.4 24.6-9.4 33.9 0l96.4 96.4 96.4-96.4c9.4-9.4 24.6-9.4 33.9 0l22.6 22.6c9.4 9.4 9.4 24.6 0 33.9l-136 136c-9.2 9.4-24.4 9.4-33.8 0z"
+                />
+              </svg>
+            </button>
+          </div>
           <button
             aria-disabled="false"
-            aria-label="Next"
+            aria-label="Reset"
             class="pf-v5-c-button pf-m-plain"
-            data-ouia-component-id="OUIA-Generated-Button-plain-5"
+            data-ouia-component-id="OUIA-Generated-Button-plain-6"
             data-ouia-component-type="PF4/Button"
             data-ouia-safe="true"
             type="button"
@@ -617,58 +678,41 @@ exports[`SearchInput search input with hint 1`] = `
               class="pf-v5-svg"
               fill="currentColor"
               role="img"
-              viewBox="0 0 320 512"
+              viewBox="0 0 352 512"
             >
               <path
-                d="M143 352.3L7 216.3c-9.4-9.4-9.4-24.6 0-33.9l22.6-22.6c9.4-9.4 24.6-9.4 33.9 0l96.4 96.4 96.4-96.4c9.4-9.4 24.6-9.4 33.9 0l22.6 22.6c9.4 9.4 9.4 24.6 0 33.9l-136 136c-9.2 9.4-24.4 9.4-33.8 0z"
+                d="M242.72 256l100.07-100.07c12.28-12.28 12.28-32.19 0-44.48l-22.24-22.24c-12.28-12.28-32.19-12.28-44.48 0L176 189.28 75.93 89.21c-12.28-12.28-32.19-12.28-44.48 0L9.21 111.45c-12.28 12.28-12.28 32.19 0 44.48L109.28 256 9.21 356.07c-12.28 12.28-12.28 32.19 0 44.48l22.24 22.24c12.28 12.28 32.2 12.28 44.48 0L176 322.72l100.07 100.07c12.28 12.28 32.2 12.28 44.48 0l22.24-22.24c12.28-12.28 12.28-32.19 0-44.48L242.72 256z"
               />
             </svg>
           </button>
         </div>
-        <button
-          aria-disabled="false"
-          aria-label="Reset"
-          class="pf-v5-c-button pf-m-plain"
-          data-ouia-component-id="OUIA-Generated-Button-plain-6"
-          data-ouia-component-type="PF4/Button"
-          data-ouia-safe="true"
-          type="button"
-        >
-          <svg
-            aria-hidden="true"
-            class="pf-v5-svg"
-            fill="currentColor"
-            role="img"
-            viewBox="0 0 352 512"
-          >
-            <path
-              d="M242.72 256l100.07-100.07c12.28-12.28 12.28-32.19 0-44.48l-22.24-22.24c-12.28-12.28-32.19-12.28-44.48 0L176 189.28 75.93 89.21c-12.28-12.28-32.19-12.28-44.48 0L9.21 111.45c-12.28 12.28-12.28 32.19 0 44.48L109.28 256 9.21 356.07c-12.28 12.28-12.28 32.19 0 44.48l22.24 22.24c12.28 12.28 32.2 12.28 44.48 0L176 322.72l100.07 100.07c12.28 12.28 32.2 12.28 44.48 0l22.24-22.24c12.28-12.28 12.28-32.19 0-44.48L242.72 256z"
-            />
-          </svg>
-        </button>
       </div>
     </div>
-    <button
-      aria-disabled="false"
-      aria-label="Search"
-      class="pf-v5-c-button pf-m-control"
-      data-ouia-component-id="OUIA-Generated-Button-control-2"
-      data-ouia-component-type="PF4/Button"
-      data-ouia-safe="true"
-      type="submit"
+    <div
+      class="pf-v5-c-input-group__item pf-m-plain"
     >
-      <svg
-        aria-hidden="true"
-        class="pf-v5-svg"
-        fill="currentColor"
-        role="img"
-        viewBox="0 0 448 512"
+      <button
+        aria-disabled="false"
+        aria-label="Search"
+        class="pf-v5-c-button pf-m-control"
+        data-ouia-component-id="OUIA-Generated-Button-control-2"
+        data-ouia-component-type="PF4/Button"
+        data-ouia-safe="true"
+        type="submit"
       >
-        <path
-          d="M190.5 66.9l22.2-22.2c9.4-9.4 24.6-9.4 33.9 0L441 239c9.4 9.4 9.4 24.6 0 33.9L246.6 467.3c-9.4 9.4-24.6 9.4-33.9 0l-22.2-22.2c-9.5-9.5-9.3-25 .4-34.3L311.4 296H24c-13.3 0-24-10.7-24-24v-32c0-13.3 10.7-24 24-24h287.4L190.9 101.2c-9.8-9.3-10-24.8-.4-34.3z"
-        />
-      </svg>
-    </button>
+        <svg
+          aria-hidden="true"
+          class="pf-v5-svg"
+          fill="currentColor"
+          role="img"
+          viewBox="0 0 448 512"
+        >
+          <path
+            d="M190.5 66.9l22.2-22.2c9.4-9.4 24.6-9.4 33.9 0L441 239c9.4 9.4 9.4 24.6 0 33.9L246.6 467.3c-9.4 9.4-24.6 9.4-33.9 0l-22.2-22.2c-9.5-9.5-9.3-25 .4-34.3L311.4 296H24c-13.3 0-24-10.7-24-24v-32c0-13.3 10.7-24 24-24h287.4L190.9 101.2c-9.8-9.3-10-24.8-.4-34.3z"
+          />
+        </svg>
+      </button>
+    </div>
   </div>
 </DocumentFragment>
 `;
@@ -679,69 +723,94 @@ exports[`SearchInput simple search input 1`] = `
     class="pf-v5-c-input-group"
   >
     <div
-      class="pf-v5-c-text-input-group"
+      class="pf-v5-c-input-group__item pf-m-fill"
     >
       <div
-        class="pf-v5-c-text-input-group__main pf-m-icon"
+        class="pf-v5-c-text-input-group"
       >
-        <span
-          class="pf-v5-c-text-input-group__text"
+        <div
+          class="pf-v5-c-text-input-group__main pf-m-icon"
         >
           <span
-            class="pf-v5-c-text-input-group__icon"
+            class="pf-v5-c-text-input-group__text"
           >
-            <svg
-              aria-hidden="true"
-              class="pf-v5-svg"
-              fill="currentColor"
-              role="img"
-              viewBox="0 0 512 512"
+            <span
+              class="pf-v5-c-text-input-group__icon"
             >
-              <path
-                d="M505 442.7L405.3 343c-4.5-4.5-10.6-7-17-7H372c27.6-35.3 44-79.7 44-128C416 93.1 322.9 0 208 0S0 93.1 0 208s93.1 208 208 208c48.3 0 92.7-16.4 128-44v16.3c0 6.4 2.5 12.5 7 17l99.7 99.7c9.4 9.4 24.6 9.4 33.9 0l28.3-28.3c9.4-9.4 9.4-24.6.1-34zM208 336c-70.7 0-128-57.2-128-128 0-70.7 57.2-128 128-128 70.7 0 128 57.2 128 128 0 70.7-57.2 128-128 128z"
-              />
-            </svg>
+              <svg
+                aria-hidden="true"
+                class="pf-v5-svg"
+                fill="currentColor"
+                role="img"
+                viewBox="0 0 512 512"
+              >
+                <path
+                  d="M505 442.7L405.3 343c-4.5-4.5-10.6-7-17-7H372c27.6-35.3 44-79.7 44-128C416 93.1 322.9 0 208 0S0 93.1 0 208s93.1 208 208 208c48.3 0 92.7-16.4 128-44v16.3c0 6.4 2.5 12.5 7 17l99.7 99.7c9.4 9.4 24.6 9.4 33.9 0l28.3-28.3c9.4-9.4 9.4-24.6.1-34zM208 336c-70.7 0-128-57.2-128-128 0-70.7 57.2-128 128-128 70.7 0 128 57.2 128 128 0 70.7-57.2 128-128 128z"
+                />
+              </svg>
+            </span>
+            <input
+              aria-label="simple text input"
+              class="pf-v5-c-text-input-group__text-input"
+              type="text"
+              value="test input"
+            />
           </span>
-          <input
-            aria-label="simple text input"
-            class="pf-v5-c-text-input-group__text-input"
-            type="text"
-            value="test input"
-          />
-        </span>
-      </div>
-      <div
-        class="pf-v5-c-text-input-group__utilities"
-      >
+        </div>
         <div
-          class="pf-v5-c-text-input-group__group"
+          class="pf-v5-c-text-input-group__utilities"
         >
-          <button
-            aria-disabled="false"
-            aria-label="Previous"
-            class="pf-v5-c-button pf-m-plain"
-            data-ouia-component-id="OUIA-Generated-Button-plain-1"
-            data-ouia-component-type="PF4/Button"
-            data-ouia-safe="true"
-            type="button"
+          <div
+            class="pf-v5-c-text-input-group__group"
           >
-            <svg
-              aria-hidden="true"
-              class="pf-v5-svg"
-              fill="currentColor"
-              role="img"
-              viewBox="0 0 320 512"
+            <button
+              aria-disabled="false"
+              aria-label="Previous"
+              class="pf-v5-c-button pf-m-plain"
+              data-ouia-component-id="OUIA-Generated-Button-plain-1"
+              data-ouia-component-type="PF4/Button"
+              data-ouia-safe="true"
+              type="button"
             >
-              <path
-                d="M177 159.7l136 136c9.4 9.4 9.4 24.6 0 33.9l-22.6 22.6c-9.4 9.4-24.6 9.4-33.9 0L160 255.9l-96.4 96.4c-9.4 9.4-24.6 9.4-33.9 0L7 329.7c-9.4-9.4-9.4-24.6 0-33.9l136-136c9.4-9.5 24.6-9.5 34-.1z"
-              />
-            </svg>
-          </button>
+              <svg
+                aria-hidden="true"
+                class="pf-v5-svg"
+                fill="currentColor"
+                role="img"
+                viewBox="0 0 320 512"
+              >
+                <path
+                  d="M177 159.7l136 136c9.4 9.4 9.4 24.6 0 33.9l-22.6 22.6c-9.4 9.4-24.6 9.4-33.9 0L160 255.9l-96.4 96.4c-9.4 9.4-24.6 9.4-33.9 0L7 329.7c-9.4-9.4-9.4-24.6 0-33.9l136-136c9.4-9.5 24.6-9.5 34-.1z"
+                />
+              </svg>
+            </button>
+            <button
+              aria-disabled="false"
+              aria-label="Next"
+              class="pf-v5-c-button pf-m-plain"
+              data-ouia-component-id="OUIA-Generated-Button-plain-2"
+              data-ouia-component-type="PF4/Button"
+              data-ouia-safe="true"
+              type="button"
+            >
+              <svg
+                aria-hidden="true"
+                class="pf-v5-svg"
+                fill="currentColor"
+                role="img"
+                viewBox="0 0 320 512"
+              >
+                <path
+                  d="M143 352.3L7 216.3c-9.4-9.4-9.4-24.6 0-33.9l22.6-22.6c9.4-9.4 24.6-9.4 33.9 0l96.4 96.4 96.4-96.4c9.4-9.4 24.6-9.4 33.9 0l22.6 22.6c9.4 9.4 9.4 24.6 0 33.9l-136 136c-9.2 9.4-24.4 9.4-33.8 0z"
+                />
+              </svg>
+            </button>
+          </div>
           <button
             aria-disabled="false"
-            aria-label="Next"
+            aria-label="Reset"
             class="pf-v5-c-button pf-m-plain"
-            data-ouia-component-id="OUIA-Generated-Button-plain-2"
+            data-ouia-component-id="OUIA-Generated-Button-plain-3"
             data-ouia-component-type="PF4/Button"
             data-ouia-safe="true"
             type="button"
@@ -751,58 +820,41 @@ exports[`SearchInput simple search input 1`] = `
               class="pf-v5-svg"
               fill="currentColor"
               role="img"
-              viewBox="0 0 320 512"
+              viewBox="0 0 352 512"
             >
               <path
-                d="M143 352.3L7 216.3c-9.4-9.4-9.4-24.6 0-33.9l22.6-22.6c9.4-9.4 24.6-9.4 33.9 0l96.4 96.4 96.4-96.4c9.4-9.4 24.6-9.4 33.9 0l22.6 22.6c9.4 9.4 9.4 24.6 0 33.9l-136 136c-9.2 9.4-24.4 9.4-33.8 0z"
+                d="M242.72 256l100.07-100.07c12.28-12.28 12.28-32.19 0-44.48l-22.24-22.24c-12.28-12.28-32.19-12.28-44.48 0L176 189.28 75.93 89.21c-12.28-12.28-32.19-12.28-44.48 0L9.21 111.45c-12.28 12.28-12.28 32.19 0 44.48L109.28 256 9.21 356.07c-12.28 12.28-12.28 32.19 0 44.48l22.24 22.24c12.28 12.28 32.2 12.28 44.48 0L176 322.72l100.07 100.07c12.28 12.28 32.2 12.28 44.48 0l22.24-22.24c12.28-12.28 12.28-32.19 0-44.48L242.72 256z"
               />
             </svg>
           </button>
         </div>
-        <button
-          aria-disabled="false"
-          aria-label="Reset"
-          class="pf-v5-c-button pf-m-plain"
-          data-ouia-component-id="OUIA-Generated-Button-plain-3"
-          data-ouia-component-type="PF4/Button"
-          data-ouia-safe="true"
-          type="button"
-        >
-          <svg
-            aria-hidden="true"
-            class="pf-v5-svg"
-            fill="currentColor"
-            role="img"
-            viewBox="0 0 352 512"
-          >
-            <path
-              d="M242.72 256l100.07-100.07c12.28-12.28 12.28-32.19 0-44.48l-22.24-22.24c-12.28-12.28-32.19-12.28-44.48 0L176 189.28 75.93 89.21c-12.28-12.28-32.19-12.28-44.48 0L9.21 111.45c-12.28 12.28-12.28 32.19 0 44.48L109.28 256 9.21 356.07c-12.28 12.28-12.28 32.19 0 44.48l22.24 22.24c12.28 12.28 32.2 12.28 44.48 0L176 322.72l100.07 100.07c12.28 12.28 32.2 12.28 44.48 0l22.24-22.24c12.28-12.28 12.28-32.19 0-44.48L242.72 256z"
-            />
-          </svg>
-        </button>
       </div>
     </div>
-    <button
-      aria-disabled="false"
-      aria-label="Search"
-      class="pf-v5-c-button pf-m-control"
-      data-ouia-component-id="OUIA-Generated-Button-control-1"
-      data-ouia-component-type="PF4/Button"
-      data-ouia-safe="true"
-      type="submit"
+    <div
+      class="pf-v5-c-input-group__item pf-m-plain"
     >
-      <svg
-        aria-hidden="true"
-        class="pf-v5-svg"
-        fill="currentColor"
-        role="img"
-        viewBox="0 0 448 512"
+      <button
+        aria-disabled="false"
+        aria-label="Search"
+        class="pf-v5-c-button pf-m-control"
+        data-ouia-component-id="OUIA-Generated-Button-control-1"
+        data-ouia-component-type="PF4/Button"
+        data-ouia-safe="true"
+        type="submit"
       >
-        <path
-          d="M190.5 66.9l22.2-22.2c9.4-9.4 24.6-9.4 33.9 0L441 239c9.4 9.4 9.4 24.6 0 33.9L246.6 467.3c-9.4 9.4-24.6 9.4-33.9 0l-22.2-22.2c-9.5-9.5-9.3-25 .4-34.3L311.4 296H24c-13.3 0-24-10.7-24-24v-32c0-13.3 10.7-24 24-24h287.4L190.9 101.2c-9.8-9.3-10-24.8-.4-34.3z"
-        />
-      </svg>
-    </button>
+        <svg
+          aria-hidden="true"
+          class="pf-v5-svg"
+          fill="currentColor"
+          role="img"
+          viewBox="0 0 448 512"
+        >
+          <path
+            d="M190.5 66.9l22.2-22.2c9.4-9.4 24.6-9.4 33.9 0L441 239c9.4 9.4 9.4 24.6 0 33.9L246.6 467.3c-9.4 9.4-24.6 9.4-33.9 0l-22.2-22.2c-9.5-9.5-9.3-25 .4-34.3L311.4 296H24c-13.3 0-24-10.7-24-24v-32c0-13.3 10.7-24 24-24h287.4L190.9 101.2c-9.8-9.3-10-24.8-.4-34.3z"
+          />
+        </svg>
+      </button>
+    </div>
   </div>
 </DocumentFragment>
 `;
diff --git a/packages/react-core/src/components/Slider/Slider.tsx b/packages/react-core/src/components/Slider/Slider.tsx
index 55174ec38a7..1f22738ed89 100644
--- a/packages/react-core/src/components/Slider/Slider.tsx
+++ b/packages/react-core/src/components/Slider/Slider.tsx
@@ -3,7 +3,7 @@ import { useState } from 'react';
 import styles from '@patternfly/react-styles/css/components/Slider/slider';
 import { css } from '@patternfly/react-styles';
 import { SliderStep } from './SliderStep';
-import { InputGroup, InputGroupText } from '../InputGroup';
+import { InputGroup, InputGroupText, InputGroupItem } from '../InputGroup';
 import { TextInput } from '../TextInput';
 import { Tooltip } from '../Tooltip';
 
@@ -333,11 +333,14 @@ export const Slider: React.FunctionComponent<SliderProps> = ({
     if (inputLabel) {
       return (
         <InputGroup>
-          {textInput}
-          <InputGroupText {...(isDisabled && { className: css(styles.modifiers.disabled) })}>
-            {' '}
-            {inputLabel}
-          </InputGroupText>
+          <InputGroupItem isFill>{textInput}</InputGroupItem>
+          <InputGroupItem isBox>
+            <InputGroupText
+              {...(isDisabled && { className: css(styles.modifiers.disabled) })}
+            >
+              {inputLabel}
+            </InputGroupText>
+          </InputGroupItem>
         </InputGroup>
       );
     } else {
diff --git a/packages/react-core/src/components/Slider/_tests_/__snapshots__/Slider.test.tsx.snap b/packages/react-core/src/components/Slider/_tests_/__snapshots__/Slider.test.tsx.snap
index b4a8ce7630b..ed9c1f152c2 100644
--- a/packages/react-core/src/components/Slider/_tests_/__snapshots__/Slider.test.tsx.snap
+++ b/packages/react-core/src/components/Slider/_tests_/__snapshots__/Slider.test.tsx.snap
@@ -413,21 +413,29 @@ exports[`slider renders slider with input 1`] = `
       <div
         class="pf-v5-c-input-group"
       >
-        <input
-          aria-invalid="false"
-          aria-label="Slider value input"
-          class="pf-v5-c-form-control pf-v5-c-form-control"
-          data-ouia-component-id="OUIA-Generated-TextInputBase-3"
-          data-ouia-component-type="PF4/TextInput"
-          data-ouia-safe="true"
-          type="number"
-          value="50"
-        />
-        <span
-          class="pf-v5-c-input-group__text"
+        <div
+          class="pf-v5-c-input-group__item pf-m-fill"
+        >
+          <input
+            aria-invalid="false"
+            aria-label="Slider value input"
+            class="pf-v5-c-form-control pf-v5-c-form-control"
+            data-ouia-component-id="OUIA-Generated-TextInputBase-3"
+            data-ouia-component-type="PF4/TextInput"
+            data-ouia-safe="true"
+            type="number"
+            value="50"
+          />
+        </div>
+        <div
+          class="pf-v5-c-input-group__item pf-m-box"
         >
-           %
-        </span>
+          <span
+            class="pf-v5-c-input-group__text"
+          >
+            %
+          </span>
+        </div>
       </div>
     </div>
   </div>
@@ -481,21 +489,29 @@ exports[`slider renders slider with input above thumb 1`] = `
         <div
           class="pf-v5-c-input-group"
         >
-          <input
-            aria-invalid="false"
-            aria-label="Slider value input"
-            class="pf-v5-c-form-control pf-v5-c-form-control"
-            data-ouia-component-id="OUIA-Generated-TextInputBase-4"
-            data-ouia-component-type="PF4/TextInput"
-            data-ouia-safe="true"
-            type="number"
-            value="50"
-          />
-          <span
-            class="pf-v5-c-input-group__text"
+          <div
+            class="pf-v5-c-input-group__item pf-m-fill"
           >
-             %
-          </span>
+            <input
+              aria-invalid="false"
+              aria-label="Slider value input"
+              class="pf-v5-c-form-control pf-v5-c-form-control"
+              data-ouia-component-id="OUIA-Generated-TextInputBase-4"
+              data-ouia-component-type="PF4/TextInput"
+              data-ouia-safe="true"
+              type="number"
+              value="50"
+            />
+          </div>
+          <div
+            class="pf-v5-c-input-group__item pf-m-box"
+          >
+            <span
+              class="pf-v5-c-input-group__text"
+            >
+              %
+            </span>
+          </div>
         </div>
       </div>
       <div
diff --git a/packages/react-core/src/components/TimePicker/TimePicker.tsx b/packages/react-core/src/components/TimePicker/TimePicker.tsx
index 3dfc57680a2..a27adc59768 100644
--- a/packages/react-core/src/components/TimePicker/TimePicker.tsx
+++ b/packages/react-core/src/components/TimePicker/TimePicker.tsx
@@ -6,7 +6,7 @@ import menuStyles from '@patternfly/react-styles/css/components/Menu/menu';
 import { getUniqueId } from '../../helpers';
 import { Popper } from '../../helpers/Popper/Popper';
 import { Menu, MenuContent, MenuList, MenuItem } from '../Menu';
-import { InputGroup } from '../InputGroup';
+import { InputGroup, InputGroupItem } from '../InputGroup';
 import { TextInput, TextInputProps } from '../TextInput';
 import { KeyTypes } from '../../helpers/constants';
 import {
@@ -535,19 +535,21 @@ export class TimePicker extends React.Component<TimePickerProps, TimePickerState
       <div ref={this.baseComponentRef} className={css(datePickerStyles.datePicker, className)}>
         <div className={css(datePickerStyles.datePickerInput)} style={style} {...props}>
           <InputGroup>
-            <div id={randomId}>
-              <div ref={this.toggleRef} style={{ paddingLeft: '0' }}>
-                <Popper
-                  appendTo={calculatedAppendTo}
-                  trigger={textInput}
-                  triggerRef={this.inputRef}
-                  popper={menuContainer}
-                  popperRef={this.menuRef}
-                  isVisible={isTimeOptionsOpen}
-                  zIndex={zIndex}
-                />
+            <InputGroupItem>
+              <div id={randomId}>
+                <div ref={this.toggleRef} style={{ paddingLeft: '0' }}>
+                  <Popper
+                    appendTo={calculatedAppendTo}
+                    trigger={textInput}
+                    triggerRef={this.inputRef}
+                    popper={menuContainer}
+                    popperRef={this.menuRef}
+                    isVisible={isTimeOptionsOpen}
+                    zIndex={zIndex}
+                  />
+                </div>
               </div>
-            </div>
+            </InputGroupItem>
           </InputGroup>
           {isInvalid && (
             <div className={css(datePickerStyles.datePickerHelperText)}>
diff --git a/packages/react-core/src/components/ToggleGroup/__tests__/__snapshots__/ToggleGroup.test.tsx.snap b/packages/react-core/src/components/ToggleGroup/__tests__/__snapshots__/ToggleGroup.test.tsx.snap
index 0374d1bcee1..1bd5a0bc446 100644
--- a/packages/react-core/src/components/ToggleGroup/__tests__/__snapshots__/ToggleGroup.test.tsx.snap
+++ b/packages/react-core/src/components/ToggleGroup/__tests__/__snapshots__/ToggleGroup.test.tsx.snap
@@ -134,19 +134,19 @@ exports[`ToggleGroup should render non-ToggleGroupItem children 1`] = `
 <DocumentFragment>
   <div
     aria-label="non-element children"
-    class="pf-c-toggle-group pf-m-compact"
+    class="pf-v5-c-toggle-group pf-m-compact"
     role="group"
   >
     <div
-      class="pf-c-toggle-group__item"
+      class="pf-v5-c-toggle-group__item"
     >
       <button
         aria-pressed="false"
-        class="pf-c-toggle-group__button"
+        class="pf-v5-c-toggle-group__button"
         type="button"
       >
         <span
-          class="pf-c-toggle-group__text"
+          class="pf-v5-c-toggle-group__text"
         >
           Test
         </span>
diff --git a/packages/react-core/src/demos/Button.md b/packages/react-core/src/demos/Button.md
index a343e706692..67e155fc32d 100644
--- a/packages/react-core/src/demos/Button.md
+++ b/packages/react-core/src/demos/Button.md
@@ -15,7 +15,7 @@ Please note that only the button can be interacted with in this example. The use
 
 ```ts
 import React from 'react';
-import { Form, FormGroup, ActionGroup, InputGroup, TextInput, Button } from '@patternfly/react-core';
+import { Form, FormGroup, ActionGroup, TextInput, Button } from '@patternfly/react-core';
 import CheckCircleIcon from '@patternfly/react-icons/dist/esm/icons/check-circle-icon';
 
 const ProgressButton: React.FunctionComponent = () => {
diff --git a/packages/react-core/src/demos/ComposableMenu/examples/ComposableContextSelector.tsx b/packages/react-core/src/demos/ComposableMenu/examples/ComposableContextSelector.tsx
index e5c67f9962e..9a0e6a8151e 100644
--- a/packages/react-core/src/demos/ComposableMenu/examples/ComposableContextSelector.tsx
+++ b/packages/react-core/src/demos/ComposableMenu/examples/ComposableContextSelector.tsx
@@ -11,6 +11,7 @@ import {
   Popper,
   Divider,
   InputGroup,
+  InputGroupItem,
   Button,
   ButtonVariant,
   SearchInput
@@ -151,21 +152,25 @@ export const ComposableContextSelector: React.FunctionComponent = () => {
       <MenuSearch>
         <MenuSearchInput>
           <InputGroup>
-            <SearchInput
-              value={searchInputValue}
-              placeholder="Search"
-              onChange={(_event, value) => onSearchInputChange(value)}
-              onKeyPress={onEnterPressed}
-              aria-labelledby="pf-context-selector-search-button-id-1"
-            />
-            <Button
-              variant={ButtonVariant.control}
-              aria-label="Search menu items"
-              id="pf-context-selector-search-button-id-1"
-              onClick={onSearchButtonClick}
-            >
-              <SearchIcon aria-hidden="true" />
-            </Button>
+            <InputGroupItem isFill>
+              <SearchInput
+                value={searchInputValue}
+                placeholder="Search"
+                onChange={(_event, value) => onSearchInputChange(value)}
+                onKeyPress={onEnterPressed}
+                aria-labelledby="pf-context-selector-search-button-id-1"
+              />
+            </InputGroupItem>
+            <InputGroupItem>
+              <Button
+                variant={ButtonVariant.control}
+                aria-label="Search menu items"
+                id="pf-context-selector-search-button-id-1"
+                onClick={onSearchButtonClick}
+              >
+                <SearchIcon aria-hidden="true" />
+              </Button>
+            </InputGroupItem>
           </InputGroup>
         </MenuSearchInput>
       </MenuSearch>
diff --git a/packages/react-core/src/demos/DatePicker/examples/DateTimePickerInModal.tsx b/packages/react-core/src/demos/DatePicker/examples/DateTimePickerInModal.tsx
index 3167cbcb837..1d2893e0480 100644
--- a/packages/react-core/src/demos/DatePicker/examples/DateTimePickerInModal.tsx
+++ b/packages/react-core/src/demos/DatePicker/examples/DateTimePickerInModal.tsx
@@ -1,5 +1,13 @@
 import React from 'react';
-import { DatePicker, Modal, ModalVariant, Button, TimePicker, InputGroup } from '@patternfly/react-core';
+import {
+  DatePicker,
+  Modal,
+  ModalVariant,
+  Button,
+  TimePicker,
+  InputGroup,
+  InputGroupItem
+} from '@patternfly/react-core';
 
 export const SimpleModal = () => {
   const [isModalOpen, setIsModalOpen] = React.useState(false);
@@ -42,8 +50,12 @@ export const SimpleModal = () => {
         ]}
       >
         <InputGroup>
-          <DatePicker ref={dateRef} appendTo={() => document.getElementById('date-time-picker-modal')} />
-          <TimePicker menuAppendTo="parent" isOpen={isTimePickerOpen} setIsOpen={setIsTimePickerOpen} />
+          <InputGroupItem>
+            <DatePicker ref={dateRef} appendTo={() => document.getElementById('date-time-picker-modal')} />
+          </InputGroupItem>
+          <InputGroupItem>
+            <TimePicker menuAppendTo="parent" isOpen={isTimePickerOpen} setIsOpen={setIsTimePickerOpen} />
+          </InputGroupItem>
         </InputGroup>
       </Modal>
     </React.Fragment>
diff --git a/packages/react-core/src/demos/DateTimePicker.md b/packages/react-core/src/demos/DateTimePicker.md
index 19a1b65bdfd..f37ac682575 100644
--- a/packages/react-core/src/demos/DateTimePicker.md
+++ b/packages/react-core/src/demos/DateTimePicker.md
@@ -21,16 +21,7 @@ In this demo, learn how to use a [CalendarMonth](/components/calendar-month) com
 ### Date and time range picker
 
 ```js
-import {
-  Flex,
-  FlexItem,
-  InputGroup,
-  DatePicker,
-  isValidDate,
-  TimePicker,
-  yyyyMMddFormat,
-  updateDateTime
-} from '@patternfly/react-core';
+import { Flex, FlexItem, InputGroup, InputGroupItem, DatePicker, isValidDate, TimePicker, yyyyMMddFormat, updateDateTime } from '@patternfly/react-core';
 
 DateTimeRangePicker = () => {
   const [from, setFrom] = React.useState();
@@ -84,26 +75,34 @@ DateTimeRangePicker = () => {
     <Flex direction={{ default: 'column', lg: 'row' }}>
       <FlexItem>
         <InputGroup>
-          <DatePicker onChange={onFromDateChange} aria-label="Start date" placeholder="YYYY-MM-DD" />
-          <TimePicker aria-label="Start time" style={{ width: '150px' }} onChange={onFromTimeChange} />
+          <InputGroupItem>
+            <DatePicker onChange={onFromDateChange} aria-label="Start date" placeholder="YYYY-MM-DD" />
+          </InputGroupItem>
+          <InputGroupItem>
+            <TimePicker aria-label="Start time" style={{ width: '150px' }} onChange={onFromTimeChange} />
+          </InputGroupItem>
         </InputGroup>
       </FlexItem>
       <FlexItem>to</FlexItem>
       <FlexItem>
         <InputGroup>
-          <DatePicker
-            value={isValidDate(to) ? yyyyMMddFormat(to) : to}
-            onChange={onToDateChange}
-            isDisabled={!isValidDate(from)}
-            rangeStart={from}
-            validators={[toValidator]}
-            aria-label="End date"
-            placeholder="YYYY-MM-DD"
-          />
-          <TimePicker style={{ width: '150px' }} onChange={onToTimeChange} isDisabled={!isValidDate(from)} />
+          <InputGroupItem>
+            <DatePicker
+              value={isValidDate(to) ? yyyyMMddFormat(to) : to}
+              onChange={onToDateChange}
+              isDisabled={!isValidDate(from)}
+              rangeStart={from}
+              validators={[toValidator]}
+              aria-label="End date"
+              placeholder="YYYY-MM-DD"
+            />
+          </InputGroupItem>
+          <InputGroupItem>
+            <TimePicker style={{ width: '150px' }} onChange={onToTimeChange} isDisabled={!isValidDate(from)} />
+          </InputGroupItem>
         </InputGroup>
       </FlexItem>
     </Flex>
   );
-};
+}
 ```
\ No newline at end of file
diff --git a/packages/react-core/src/demos/PasswordGenerator.md b/packages/react-core/src/demos/PasswordGenerator.md
index 3beb06cb79f..710b2d774e1 100644
--- a/packages/react-core/src/demos/PasswordGenerator.md
+++ b/packages/react-core/src/demos/PasswordGenerator.md
@@ -15,6 +15,7 @@ import EyeSlashIcon from '@patternfly/react-icons/dist/esm/icons/eye-slash-icon'
 import React from 'react';
 import {
   InputGroup,
+  InputGroupItem,
   TextInput,
   Button,
   Popper,
@@ -119,23 +120,27 @@ const PasswordGenerator: React.FunctionComponent = () => {
   const textInput = (
     <div ref={searchInputRef} id="password-input">
       <InputGroup>
-        <TextInput
-          onFocus={() => {
-            setIsAutocompleteOpen(true);
-          }}
-          isRequired
-          type={passwordHidden ? 'password' : 'text'}
-          aria-label="Password input"
-          value={password}
-          onChange={onChange}
-        />
-        <Button
-          variant="control"
-          onClick={() => setPasswordHidden(!passwordHidden)}
-          aria-label={passwordHidden ? 'Show password' : 'Hide password'}
-        >
-          {passwordHidden ? <EyeIcon /> : <EyeSlashIcon />}
-        </Button>
+        <InputGroupItem isFill>
+          <TextInput
+            onFocus={() => {
+              setIsAutocompleteOpen(true);
+            }}
+            isRequired
+            type={passwordHidden ? 'password' : 'text'}
+            aria-label="Password input"
+            value={password}
+            onChange={onChange}
+          />
+        </InputGroupItem>
+        <InputGroupItem>
+          <Button
+            variant="control"
+            onClick={() => setPasswordHidden(!passwordHidden)}
+            aria-label={passwordHidden ? 'Show password' : 'Hide password'}
+          >
+            {passwordHidden ? <EyeIcon /> : <EyeSlashIcon />}
+          </Button>
+        </InputGroupItem>
       </InputGroup>
     </div>
   );
diff --git a/packages/react-core/src/demos/PrimaryDetail.md b/packages/react-core/src/demos/PrimaryDetail.md
index 4c525c9661b..4c34be969a5 100644
--- a/packages/react-core/src/demos/PrimaryDetail.md
+++ b/packages/react-core/src/demos/PrimaryDetail.md
@@ -58,6 +58,7 @@ import {
   Flex,
   FlexItem,
   InputGroup,
+  InputGroupItem,
   PageSection,
   PageSectionVariants,
   Progress,
@@ -197,17 +198,21 @@ class PrimaryDetailFullPage extends React.Component {
       <React.Fragment>
         <ToolbarItem>
           <InputGroup>
-            <TextInput
-              name="full-page-data-toolbar-input1"
-              id="full-page-data-toolbar-input1"
-              type="search"
-              aria-label="search input example"
-              onChange={this.onInputChange}
-              value={inputValue}
-            />
-            <Button variant={ButtonVariant.control} aria-label="search button for search input">
-              <SearchIcon />
-            </Button>
+            <InputGroupItem isFill>
+              <TextInput
+                name="full-page-data-toolbar-input1"
+                id="full-page-data-toolbar-input1"
+                type="search"
+                aria-label="search input example"
+                onChange={this.onInputChange}
+                value={inputValue}
+              />
+            </InputGroupItem>
+            <InputGroupItem>
+              <Button variant={ButtonVariant.control} aria-label="search button for search input">
+                <SearchIcon />
+              </Button>
+            </InputGroupItem>
           </InputGroup>
         </ToolbarItem>
         <ToolbarGroup variant="filter-group">
@@ -521,6 +526,7 @@ import {
   Flex,
   FlexItem,
   InputGroup,
+  InputGroupItem,
   PageSection,
   PageSectionVariants,
   Progress,
@@ -659,17 +665,21 @@ class PrimaryDetailContentPadding extends React.Component {
       <React.Fragment>
         <ToolbarItem>
           <InputGroup>
-            <TextInput
-              name="content-padding-data-toolbar-input1"
-              id="content-padding-data-toolbar-input1"
-              type="search"
-              aria-label="search input example"
-              onChange={this.onInputChange}
-              value={inputValue}
-            />
-            <Button variant={ButtonVariant.control} aria-label="search button for search input">
-              <SearchIcon />
-            </Button>
+            <InputGroupItem isFill>
+              <TextInput
+                name="content-padding-data-toolbar-input1"
+                id="content-padding-data-toolbar-input1"
+                type="search"
+                aria-label="search input example"
+                onChange={this.onInputChange}
+                value={inputValue}
+              />
+            </InputGroupItem>
+            <InputGroupItem>
+              <Button variant={ButtonVariant.control} aria-label="search button for search input">
+                <SearchIcon />
+              </Button>
+            </InputGroupItem>
           </InputGroup>
         </ToolbarItem>
         <ToolbarGroup variant="filter-group">
@@ -1996,6 +2006,7 @@ import {
   Flex,
   FlexItem,
   InputGroup,
+  InputGroupItem,
   PageSection,
   PageSectionVariants,
   Progress,
@@ -2134,17 +2145,21 @@ class PrimaryDetailInlineModifier extends React.Component {
       <React.Fragment>
         <ToolbarItem>
           <InputGroup>
-            <TextInput
-              name="inline-modifier-input"
-              id="inline-modifier-input"
-              type="search"
-              aria-label="search input example"
-              onChange={this.onInputChange}
-              value={inputValue}
-            />
-            <Button variant={ButtonVariant.control} aria-label="search button for search input">
-              <SearchIcon />
-            </Button>
+            <InputGroupItem isFill>
+              <TextInput
+                name="inline-modifier-input"
+                id="inline-modifier-input"
+                type="search"
+                aria-label="search input example"
+                onChange={this.onInputChange}
+                value={inputValue}
+              />
+            </InputGroupItem>
+            <InputGroupItem>
+              <Button variant={ButtonVariant.control} aria-label="search button for search input">
+                <SearchIcon />
+              </Button>
+            </InputGroupItem>
           </InputGroup>
         </ToolbarItem>
         <ToolbarGroup variant="filter-group">
diff --git a/packages/react-core/src/demos/examples/DateTimePicker/DateTimePicker.tsx b/packages/react-core/src/demos/examples/DateTimePicker/DateTimePicker.tsx
index 07d5792a8e8..2a9462d18f8 100644
--- a/packages/react-core/src/demos/examples/DateTimePicker/DateTimePicker.tsx
+++ b/packages/react-core/src/demos/examples/DateTimePicker/DateTimePicker.tsx
@@ -2,6 +2,7 @@ import React from 'react';
 import {
   CalendarMonth,
   InputGroup,
+  InputGroupItem,
   TextInput,
   Button,
   Popover,
@@ -89,15 +90,17 @@ export const DateTimePicker: React.FunctionComponent = () => {
         hasAutoWidth
       >
         <InputGroup>
-          <TextInput
-            type="text"
-            id="date-time"
-            aria-label="date and time picker demo"
-            value={valueDate + ' ' + valueTime}
-            isReadOnly
-          />
-          {calendarButton}
-          {time}
+          <InputGroupItem>
+            <TextInput
+              type="text"
+              id="date-time"
+              aria-label="date and time picker demo"
+              value={valueDate + ' ' + valueTime}
+              isReadOnly
+            />
+          </InputGroupItem>
+          <InputGroupItem>{calendarButton}</InputGroupItem>
+          <InputGroupItem>{time}</InputGroupItem>
         </InputGroup>
       </Popover>
     </div>
diff --git a/packages/react-core/src/deprecated/components/ContextSelector/__tests__/__snapshots__/ContextSelector.test.tsx.snap b/packages/react-core/src/deprecated/components/ContextSelector/__tests__/__snapshots__/ContextSelector.test.tsx.snap
index f118f3c434b..aa2cd938874 100644
--- a/packages/react-core/src/deprecated/components/ContextSelector/__tests__/__snapshots__/ContextSelector.test.tsx.snap
+++ b/packages/react-core/src/deprecated/components/ContextSelector/__tests__/__snapshots__/ContextSelector.test.tsx.snap
@@ -84,60 +84,68 @@ exports[`ContextSelector Renders ContextSelector open 1`] = `
             class="pf-v5-c-input-group"
           >
             <div
-              class="pf-v5-c-text-input-group"
+              class="pf-v5-c-input-group__item pf-m-fill"
             >
               <div
-                class="pf-v5-c-text-input-group__main pf-m-icon"
+                class="pf-v5-c-text-input-group"
               >
-                <span
-                  class="pf-v5-c-text-input-group__text"
+                <div
+                  class="pf-v5-c-text-input-group__main pf-m-icon"
                 >
                   <span
-                    class="pf-v5-c-text-input-group__icon"
+                    class="pf-v5-c-text-input-group__text"
                   >
-                    <svg
-                      aria-hidden="true"
-                      class="pf-v5-svg"
-                      fill="currentColor"
-                      role="img"
-                      viewBox="0 0 512 512"
+                    <span
+                      class="pf-v5-c-text-input-group__icon"
                     >
-                      <path
-                        d="M505 442.7L405.3 343c-4.5-4.5-10.6-7-17-7H372c27.6-35.3 44-79.7 44-128C416 93.1 322.9 0 208 0S0 93.1 0 208s93.1 208 208 208c48.3 0 92.7-16.4 128-44v16.3c0 6.4 2.5 12.5 7 17l99.7 99.7c9.4 9.4 24.6 9.4 33.9 0l28.3-28.3c9.4-9.4 9.4-24.6.1-34zM208 336c-70.7 0-128-57.2-128-128 0-70.7 57.2-128 128-128 70.7 0 128 57.2 128 128 0 70.7-57.2 128-128 128z"
-                      />
-                    </svg>
+                      <svg
+                        aria-hidden="true"
+                        class="pf-v5-svg"
+                        fill="currentColor"
+                        role="img"
+                        viewBox="0 0 512 512"
+                      >
+                        <path
+                          d="M505 442.7L405.3 343c-4.5-4.5-10.6-7-17-7H372c27.6-35.3 44-79.7 44-128C416 93.1 322.9 0 208 0S0 93.1 0 208s93.1 208 208 208c48.3 0 92.7-16.4 128-44v16.3c0 6.4 2.5 12.5 7 17l99.7 99.7c9.4 9.4 24.6 9.4 33.9 0l28.3-28.3c9.4-9.4 9.4-24.6.1-34zM208 336c-70.7 0-128-57.2-128-128 0-70.7 57.2-128 128-128 70.7 0 128 57.2 128 128 0 70.7-57.2 128-128 128z"
+                        />
+                      </svg>
+                    </span>
+                    <input
+                      aria-label="Search input"
+                      class="pf-v5-c-text-input-group__text-input"
+                      placeholder="Search"
+                      type="text"
+                      value=""
+                    />
                   </span>
-                  <input
-                    aria-label="Search input"
-                    class="pf-v5-c-text-input-group__text-input"
-                    placeholder="Search"
-                    type="text"
-                    value=""
-                  />
-                </span>
+                </div>
               </div>
             </div>
-            <button
-              aria-disabled="false"
-              aria-label="Search menu items"
-              class="pf-v5-c-button pf-m-control"
-              data-ouia-component-id="OUIA-Generated-Button-control-1"
-              data-ouia-component-type="PF4/Button"
-              data-ouia-safe="true"
-              type="submit"
+            <div
+              class="pf-v5-c-input-group__item pf-m-plain"
             >
-              <svg
-                aria-hidden="true"
-                class="pf-v5-svg"
-                fill="currentColor"
-                role="img"
-                viewBox="0 0 448 512"
+              <button
+                aria-disabled="false"
+                aria-label="Search menu items"
+                class="pf-v5-c-button pf-m-control"
+                data-ouia-component-id="OUIA-Generated-Button-control-1"
+                data-ouia-component-type="PF4/Button"
+                data-ouia-safe="true"
+                type="submit"
               >
-                <path
-                  d="M190.5 66.9l22.2-22.2c9.4-9.4 24.6-9.4 33.9 0L441 239c9.4 9.4 9.4 24.6 0 33.9L246.6 467.3c-9.4 9.4-24.6 9.4-33.9 0l-22.2-22.2c-9.5-9.5-9.3-25 .4-34.3L311.4 296H24c-13.3 0-24-10.7-24-24v-32c0-13.3 10.7-24 24-24h287.4L190.9 101.2c-9.8-9.3-10-24.8-.4-34.3z"
-                />
-              </svg>
-            </button>
+                <svg
+                  aria-hidden="true"
+                  class="pf-v5-svg"
+                  fill="currentColor"
+                  role="img"
+                  viewBox="0 0 448 512"
+                >
+                  <path
+                    d="M190.5 66.9l22.2-22.2c9.4-9.4 24.6-9.4 33.9 0L441 239c9.4 9.4 9.4 24.6 0 33.9L246.6 467.3c-9.4 9.4-24.6 9.4-33.9 0l-22.2-22.2c-9.5-9.5-9.3-25 .4-34.3L311.4 296H24c-13.3 0-24-10.7-24-24v-32c0-13.3 10.7-24 24-24h287.4L190.9 101.2c-9.8-9.3-10-24.8-.4-34.3z"
+                  />
+                </svg>
+              </button>
+            </div>
           </div>
         </div>
         <ul
@@ -247,60 +255,68 @@ exports[`ContextSelector Renders in strict mode 1`] = `
             class="pf-v5-c-input-group"
           >
             <div
-              class="pf-v5-c-text-input-group"
+              class="pf-v5-c-input-group__item pf-m-fill"
             >
               <div
-                class="pf-v5-c-text-input-group__main pf-m-icon"
+                class="pf-v5-c-text-input-group"
               >
-                <span
-                  class="pf-v5-c-text-input-group__text"
+                <div
+                  class="pf-v5-c-text-input-group__main pf-m-icon"
                 >
                   <span
-                    class="pf-v5-c-text-input-group__icon"
+                    class="pf-v5-c-text-input-group__text"
                   >
-                    <svg
-                      aria-hidden="true"
-                      class="pf-v5-svg"
-                      fill="currentColor"
-                      role="img"
-                      viewBox="0 0 512 512"
+                    <span
+                      class="pf-v5-c-text-input-group__icon"
                     >
-                      <path
-                        d="M505 442.7L405.3 343c-4.5-4.5-10.6-7-17-7H372c27.6-35.3 44-79.7 44-128C416 93.1 322.9 0 208 0S0 93.1 0 208s93.1 208 208 208c48.3 0 92.7-16.4 128-44v16.3c0 6.4 2.5 12.5 7 17l99.7 99.7c9.4 9.4 24.6 9.4 33.9 0l28.3-28.3c9.4-9.4 9.4-24.6.1-34zM208 336c-70.7 0-128-57.2-128-128 0-70.7 57.2-128 128-128 70.7 0 128 57.2 128 128 0 70.7-57.2 128-128 128z"
-                      />
-                    </svg>
+                      <svg
+                        aria-hidden="true"
+                        class="pf-v5-svg"
+                        fill="currentColor"
+                        role="img"
+                        viewBox="0 0 512 512"
+                      >
+                        <path
+                          d="M505 442.7L405.3 343c-4.5-4.5-10.6-7-17-7H372c27.6-35.3 44-79.7 44-128C416 93.1 322.9 0 208 0S0 93.1 0 208s93.1 208 208 208c48.3 0 92.7-16.4 128-44v16.3c0 6.4 2.5 12.5 7 17l99.7 99.7c9.4 9.4 24.6 9.4 33.9 0l28.3-28.3c9.4-9.4 9.4-24.6.1-34zM208 336c-70.7 0-128-57.2-128-128 0-70.7 57.2-128 128-128 70.7 0 128 57.2 128 128 0 70.7-57.2 128-128 128z"
+                        />
+                      </svg>
+                    </span>
+                    <input
+                      aria-label="Search input"
+                      class="pf-v5-c-text-input-group__text-input"
+                      placeholder="Search"
+                      type="text"
+                      value=""
+                    />
                   </span>
-                  <input
-                    aria-label="Search input"
-                    class="pf-v5-c-text-input-group__text-input"
-                    placeholder="Search"
-                    type="text"
-                    value=""
-                  />
-                </span>
+                </div>
               </div>
             </div>
-            <button
-              aria-disabled="false"
-              aria-label="Search menu items"
-              class="pf-v5-c-button pf-m-control"
-              data-ouia-component-id="OUIA-Generated-Button-control-3"
-              data-ouia-component-type="PF4/Button"
-              data-ouia-safe="true"
-              type="submit"
+            <div
+              class="pf-v5-c-input-group__item pf-m-plain"
             >
-              <svg
-                aria-hidden="true"
-                class="pf-v5-svg"
-                fill="currentColor"
-                role="img"
-                viewBox="0 0 448 512"
+              <button
+                aria-disabled="false"
+                aria-label="Search menu items"
+                class="pf-v5-c-button pf-m-control"
+                data-ouia-component-id="OUIA-Generated-Button-control-3"
+                data-ouia-component-type="PF4/Button"
+                data-ouia-safe="true"
+                type="submit"
               >
-                <path
-                  d="M190.5 66.9l22.2-22.2c9.4-9.4 24.6-9.4 33.9 0L441 239c9.4 9.4 9.4 24.6 0 33.9L246.6 467.3c-9.4 9.4-24.6 9.4-33.9 0l-22.2-22.2c-9.5-9.5-9.3-25 .4-34.3L311.4 296H24c-13.3 0-24-10.7-24-24v-32c0-13.3 10.7-24 24-24h287.4L190.9 101.2c-9.8-9.3-10-24.8-.4-34.3z"
-                />
-              </svg>
-            </button>
+                <svg
+                  aria-hidden="true"
+                  class="pf-v5-svg"
+                  fill="currentColor"
+                  role="img"
+                  viewBox="0 0 448 512"
+                >
+                  <path
+                    d="M190.5 66.9l22.2-22.2c9.4-9.4 24.6-9.4 33.9 0L441 239c9.4 9.4 9.4 24.6 0 33.9L246.6 467.3c-9.4 9.4-24.6 9.4-33.9 0l-22.2-22.2c-9.5-9.5-9.3-25 .4-34.3L311.4 296H24c-13.3 0-24-10.7-24-24v-32c0-13.3 10.7-24 24-24h287.4L190.9 101.2c-9.8-9.3-10-24.8-.4-34.3z"
+                  />
+                </svg>
+              </button>
+            </div>
           </div>
         </div>
         <ul
diff --git a/packages/react-integration/cypress/integration/searchinput.spec.ts b/packages/react-integration/cypress/integration/searchinput.spec.ts
index 1a48e539123..d7ed6c987c0 100644
--- a/packages/react-integration/cypress/integration/searchinput.spec.ts
+++ b/packages/react-integration/cypress/integration/searchinput.spec.ts
@@ -52,7 +52,7 @@ describe('Search Input Demo Test', () => {
 
   it('Verify advanced search and its handlers work', () => {
     cy.get('#enabled-search .pf-v5-c-panel').should('not.exist');
-    cy.get('#enabled-search .pf-v5-c-input-group > button').eq(0).click();
+    cy.get('#enabled-search .pf-v5-c-input-group .pf-v5-c-input-group__item >  button').eq(0).click();
     cy.get('#enabled-search .pf-v5-c-panel').should('be.visible');
 
     cy.get('#enabled-search .pf-v5-c-form-control').eq(0).type('test');
diff --git a/packages/react-integration/demo-app-ts/src/components/demos/AlertGroupDemo/AlertGroupDemo.tsx b/packages/react-integration/demo-app-ts/src/components/demos/AlertGroupDemo/AlertGroupDemo.tsx
index 22c66400acb..310c988048c 100644
--- a/packages/react-integration/demo-app-ts/src/components/demos/AlertGroupDemo/AlertGroupDemo.tsx
+++ b/packages/react-integration/demo-app-ts/src/components/demos/AlertGroupDemo/AlertGroupDemo.tsx
@@ -1,5 +1,5 @@
 import React from 'react';
-import { Alert, AlertGroup, AlertVariant, AlertActionCloseButton, InputGroup } from '@patternfly/react-core';
+import { Alert, AlertGroup, AlertVariant, AlertActionCloseButton, InputGroup , InputGroupItem} from '@patternfly/react-core';
 
 interface AlertDemoAlert {
   title: string;
@@ -55,12 +55,16 @@ export class AlertGroupDemo extends React.Component<{}, AlertGroupDemoState> {
     return (
       <React.Fragment>
         <InputGroup style={{ marginBottom: '16px' }}>
-          <button onClick={startAsyncAlerts} type="button" className={btnClasses}>
-            Start Async Alerts
-          </button>
-          <button onClick={this.stopAsyncAlerts} type="button" className={btnClasses}>
-            Stop Async Alerts
-          </button>
+          <InputGroupItem>
+            <button onClick={startAsyncAlerts} type="button" className={btnClasses}>
+              Start Async Alerts
+            </button>
+          </InputGroupItem>
+          <InputGroupItem>
+            <button onClick={this.stopAsyncAlerts} type="button" className={btnClasses}>
+              Stop Async Alerts
+            </button>
+          </InputGroupItem>
         </InputGroup>
         <AlertGroup isToast>
           {this.state.alerts.map(({ title, variant, key }) => (
diff --git a/packages/react-integration/demo-app-ts/src/components/demos/InputGroupDemo/InputGroupDemo.tsx b/packages/react-integration/demo-app-ts/src/components/demos/InputGroupDemo/InputGroupDemo.tsx
index b438ed8de41..69880b07423 100644
--- a/packages/react-integration/demo-app-ts/src/components/demos/InputGroupDemo/InputGroupDemo.tsx
+++ b/packages/react-integration/demo-app-ts/src/components/demos/InputGroupDemo/InputGroupDemo.tsx
@@ -11,6 +11,7 @@ import {
   InputGroup,
   InputGroupText,
   InputGroupTextVariant,
+  InputGroupItem,
   TextInput,
   Popover,
   PopoverPosition,
@@ -53,119 +54,173 @@ export class InputGroupDemo extends React.Component<{}, InputGroupState> {
     return (
       <React.Fragment>
         <InputGroup>
-          <Button id="textAreaButton1" variant={ButtonVariant.control}>
-            Button
-          </Button>
-          <TextArea name="textarea1" id="textarea1" aria-label="textarea with buttons" />
-          <Button variant={ButtonVariant.control}>Button</Button>
+          <InputGroupItem>
+            <Button id="textAreaButton1" variant={ButtonVariant.control}>
+              Button
+            </Button>
+          </InputGroupItem>
+          <InputGroupItem isFill>
+            <TextArea name="textarea1" id="textarea1" aria-label="textarea with buttons" />
+          </InputGroupItem>
+          <InputGroupItem>
+            <Button variant={ButtonVariant.control}>Button</Button>
+          </InputGroupItem>
         </InputGroup>
         <br />
         <br />
         <InputGroup>
-          <TextArea name="textarea2" id="textarea2" aria-label="textarea with button" />
-          <Button id="textAreaButton2" variant={ButtonVariant.control}>
-            Button
-          </Button>
+          <InputGroupItem isFill>
+            <TextArea name="textarea2" id="textarea2" aria-label="textarea with button" />
+          </InputGroupItem>
+          <InputGroupItem>
+            <Button id="textAreaButton2" variant={ButtonVariant.control}>
+              Button
+            </Button>
+          </InputGroupItem>
         </InputGroup>
         <br />
         <br />
         <InputGroup>
-          <Button id="textAreaButton3" variant={ButtonVariant.control}>
-            Button
-          </Button>
-          <Button variant={ButtonVariant.control}>Button</Button>
-          <TextArea name="textarea3" id="textarea3" aria-label="textarea with 3 buttons" />
-          <Button variant={ButtonVariant.control}>Button</Button>
+          <InputGroupItem>
+            <Button id="textAreaButton3" variant={ButtonVariant.control}>
+              Button
+            </Button>
+          </InputGroupItem>
+          <InputGroupItem>
+            <Button variant={ButtonVariant.control}>Button</Button>
+          </InputGroupItem>
+          <InputGroupItem isFill>
+            <TextArea name="textarea3" id="textarea3" aria-label="textarea with 3 buttons" />
+          </InputGroupItem>
+          <InputGroupItem>
+            <Button variant={ButtonVariant.control}>Button</Button>
+          </InputGroupItem>
         </InputGroup>
         <br />
         <br />
         <InputGroup>
-          <Dropdown
-            onSelect={this.onSelect}
-            isOpen={this.state.isOpen}
-            onOpenChange={(isOpen) => this.setState({ isOpen })}
-            toggle={(toggleRef) => (
-              <MenuToggle ref={toggleRef} onClick={this.onToggle} isExpanded={this.state.isOpen}>
-                {this.state.selected ? this.state.selected : 'Dropdown'}
-              </MenuToggle>
-            )}
-          >
-            <DropdownList>
-              <DropdownItem key="opt-1">Option 1</DropdownItem>
-              <DropdownItem key="opt-2">Option 2</DropdownItem>
-              <DropdownItem key="opt-3">Option 3</DropdownItem>
-            </DropdownList>
-          </Dropdown>
-          <TextInput id="textInput3" aria-label="input with dropdown and button" />
-          <Button id="inputDropdownButton1" variant={ButtonVariant.control}>
-            Button
-          </Button>
+          <InputGroupItem>
+            <Dropdown
+              onSelect={this.onSelect}
+              isOpen={this.state.isOpen}
+              onOpenChange={(isOpen) => this.setState({ isOpen })}
+              toggle={(toggleRef) => (
+                <MenuToggle ref={toggleRef} onClick={this.onToggle} isExpanded={this.state.isOpen}>
+                  {this.state.selected ? this.state.selected : 'Dropdown'}
+                </MenuToggle>
+              )}
+            >
+              <DropdownList>
+                <DropdownItem key="opt-1">Option 1</DropdownItem>
+                <DropdownItem key="opt-2">Option 2</DropdownItem>
+                <DropdownItem key="opt-3">Option 3</DropdownItem>
+              </DropdownList>
+            </Dropdown>
+          </InputGroupItem>
+          <InputGroupItem isFill>
+            <TextInput id="textInput3" aria-label="input with dropdown and button" />
+          </InputGroupItem>
+          <InputGroupItem>
+            <Button id="inputDropdownButton1" variant={ButtonVariant.control}>
+              Button
+            </Button>
+          </InputGroupItem>
         </InputGroup>
         <br />
         <br />
         <InputGroup>
-          <InputGroupText>
-            <DollarSignIcon />
-          </InputGroupText>
-          <TextInput id="textInput5" type="number" aria-label="Dollar amount input example" />
-          <InputGroupText>.00</InputGroupText>
+          <InputGroupItem>
+            <InputGroupText>
+              <DollarSignIcon />
+            </InputGroupText>
+          </InputGroupItem>
+          <InputGroupItem isFill>
+            <TextInput id="textInput5" type="number" aria-label="Dollar amount input example" />
+          </InputGroupItem>
+          <InputGroupItem>
+            <InputGroupText>.00</InputGroupText>
+          </InputGroupItem>
         </InputGroup>
         <br />
         <br />
         <InputGroup>
-          <TextInput id="textInput6" type="email" aria-label="email input field" />
-          <InputGroupText id="email-example">@example.com</InputGroupText>
+          <InputGroupItem isFill>
+            <TextInput id="textInput6" type="email" aria-label="email input field" />
+          </InputGroupItem>
+          <InputGroupItem isBox>
+            <InputGroupText id="email-example">@example.com</InputGroupText>
+          </InputGroupItem>
         </InputGroup>
         <br />
         <br />
         <InputGroup>
-          <InputGroupText id="username" aria-label="@">
-            <AtIcon />
-          </InputGroupText>
-          <TextInput
-            validated={ValidatedOptions.error}
-            id="textInput7"
-            type="email"
-            aria-label="Error state username example"
-          />
+          <InputGroupItem isBox>
+            <InputGroupText id="username" aria-label="@">
+              <AtIcon />
+            </InputGroupText>
+          </InputGroupItem>
+          <InputGroupItem isFill>
+            <TextInput
+              validated={ValidatedOptions.error}
+              id="textInput7"
+              type="email"
+              aria-label="Error state username example"
+            />
+          </InputGroupItem>
         </InputGroup>
         <br />
         <br />
         <InputGroup>
-          <InputGroupText component="label" htmlFor="textInput9">
-            <CalendarAltIcon />
-          </InputGroupText>
-          <TextInput name="textInput9" id="textInput9" type="date" aria-label="Date input example" />
+          <InputGroupItem>
+            <InputGroupText component="label" htmlFor="textInput9">
+              <CalendarAltIcon />
+            </InputGroupText>
+          </InputGroupItem>
+          <InputGroupItem>
+            <TextInput name="textInput9" id="textInput9" type="date" aria-label="Date input example" />
+          </InputGroupItem>
         </InputGroup>
         <br />
         <br />
         <InputGroup>
-          <TextInput name="textInput11" id="textInput11" type="search" aria-label="search input example" />
-          <Button variant={ButtonVariant.control} aria-label="search button for search input">
-            <SearchIcon />
-          </Button>
+          <InputGroupItem isFill>
+            <TextInput name="textInput11" id="textInput11" type="search" aria-label="search input example" />
+          </InputGroupItem>
+          <InputGroupItem>
+            <Button variant={ButtonVariant.control} aria-label="search button for search input">
+              <SearchIcon />
+            </Button>
+          </InputGroupItem>
         </InputGroup>
         <br />
         <br />
         <InputGroup>
-          <TextInput name="textInput10" id="textInput10" type="search" aria-label="input example with popover" />
-          <Popover
-            aria-label="popover example"
-            position={PopoverPosition.top}
-            bodyContent="This field is an example of input group with popover"
-          >
-            <Button variant={ButtonVariant.control} aria-label="popover for input">
-              <QuestionCircleIcon />
-            </Button>
-          </Popover>
+          <InputGroupItem isFill>
+            <TextInput name="textInput10" id="textInput10" type="search" aria-label="input example with popover" />
+          </InputGroupItem>
+          <InputGroupItem>
+            <Popover
+              aria-label="popover example"
+              position={PopoverPosition.top}
+              bodyContent="This field is an example of input group with popover"
+            >
+              <Button variant={ButtonVariant.control} aria-label="popover for input">
+                <QuestionCircleIcon />
+              </Button>
+            </Popover>
+          </InputGroupItem>
         </InputGroup>
         <br />
         <br />
         <InputGroup>
-          <TextInput name="textIndex12" id="textInput12" type="text" aria-label="percentage" />
-          <InputGroupText id="plain-example" variant={InputGroupTextVariant.plain}>
-            %
-          </InputGroupText>
+          <InputGroupItem isFill>
+            <TextInput name="textIndex12" id="textInput12" type="text" aria-label="percentage" />
+          </InputGroupItem>
+          <InputGroupItem isPlain isBox>
+            <InputGroupText id="plain-example" variant={InputGroupTextVariant.plain}>
+              %
+            </InputGroupText>
+          </InputGroupItem>
         </InputGroup>
       </React.Fragment>
     );
diff --git a/packages/react-integration/demo-app-ts/src/components/demos/SelectDeprecatedDemo/SelectInModal.tsx b/packages/react-integration/demo-app-ts/src/components/demos/SelectDeprecatedDemo/SelectInModal.tsx
index 30e8a066da8..479a2c5d30a 100644
--- a/packages/react-integration/demo-app-ts/src/components/demos/SelectDeprecatedDemo/SelectInModal.tsx
+++ b/packages/react-integration/demo-app-ts/src/components/demos/SelectDeprecatedDemo/SelectInModal.tsx
@@ -4,7 +4,8 @@ import {
   ModalVariant,
   Button,
   TimePicker,
-  InputGroup
+  InputGroup,
+  InputGroupItem
 } from '@patternfly/react-core';
 import {
   Select,
@@ -48,6 +49,7 @@ export const SelectInModal = () => {
     setSelection(newSelection);
   };
 
+  const inputGroupRef1 = React.useRef(null);
   return (
     <React.Fragment>
       <Button id="modal-for-select-in-modal" variant="primary" onClick={handleModalToggle}>
@@ -69,33 +71,37 @@ export const SelectInModal = () => {
           </Button>
         ]}
       >
-        <InputGroup>
-          <Select
-            placeholderText="Select an option"
-            aria-label="Select Input with descriptions"
-            onToggle={onSelectToggle}
-            onSelect={onSelect}
-            selections={selection}
-            isOpen={isSelectOpen}
-            menuAppendTo="parent"
-            toggleId="select-in-modal-select"
-          >
-            {options.map((option, index) => (
-              <SelectOption
-                isDisabled={option.disabled}
-                key={index}
-                value={option.value}
-                isPlaceholder={option.isPlaceholder}
-                description="This is a description"
-              />
-            ))}
-          </Select>
-          <TimePicker
-            id="select-in-modal-time-picker"
-            isOpen={isTimePickerOpen}
-            setIsOpen={setIsTimePickerOpen}
-            menuAppendTo="parent"
-          />
+        <InputGroup ref={inputGroupRef1}>
+          <InputGroupItem isFill>
+            <Select
+              placeholderText="Select an option"
+              aria-label="Select Input with descriptions"
+              onToggle={onSelectToggle}
+              onSelect={onSelect}
+              selections={selection}
+              isOpen={isSelectOpen}
+              menuAppendTo={() => inputGroupRef1.current}
+              toggleId="select-in-modal-select"
+            >
+              {options.map((option, index) => (
+                <SelectOption
+                  isDisabled={option.disabled}
+                  key={index}
+                  value={option.value}
+                  isPlaceholder={option.isPlaceholder}
+                  description="This is a description"
+                />
+              ))}
+            </Select>
+          </InputGroupItem>
+          <InputGroupItem>
+            <TimePicker
+              id="select-in-modal-time-picker"
+              isOpen={isTimePickerOpen}
+              setIsOpen={setIsTimePickerOpen}
+              menuAppendTo={() => inputGroupRef1.current}
+            />
+          </InputGroupItem>
         </InputGroup>
       </Modal>
     </React.Fragment>
diff --git a/packages/react-integration/demo-app-ts/src/components/demos/ToolbarDemo/ToolbarDemo.tsx b/packages/react-integration/demo-app-ts/src/components/demos/ToolbarDemo/ToolbarDemo.tsx
index ae7370676cd..4ee71b509f8 100644
--- a/packages/react-integration/demo-app-ts/src/components/demos/ToolbarDemo/ToolbarDemo.tsx
+++ b/packages/react-integration/demo-app-ts/src/components/demos/ToolbarDemo/ToolbarDemo.tsx
@@ -12,6 +12,7 @@ import {
   ToolbarGroup,
   ToolbarProps,
   InputGroup,
+  InputGroupItem,
   TextInput,
   Dropdown,
   DropdownItem,
@@ -178,17 +179,21 @@ export class ToolbarDemo extends React.Component<ToolbarProps, ToolbarState> {
       <React.Fragment>
         <ToolbarItem id="toolbar-demo-search">
           <InputGroup>
-            <TextInput
-              name="textInput2"
-              id="textInput2"
-              type="search"
-              aria-label="search input example"
-              onChange={this.onInputChange}
-              value={inputValue}
-            />
-            <Button variant={ButtonVariant.tertiary} aria-label="search button for search input">
-              <SearchIcon />
-            </Button>
+            <InputGroupItem>
+              <TextInput
+                name="textInput2"
+                id="textInput2"
+                type="search"
+                aria-label="search input example"
+                onChange={this.onInputChange}
+                value={inputValue}
+              />
+            </InputGroupItem>
+            <InputGroupItem>
+              <Button variant={ButtonVariant.tertiary} aria-label="search button for search input">
+                <SearchIcon />
+              </Button>
+            </InputGroupItem>
           </InputGroup>
         </ToolbarItem>
         <ToolbarGroup variant="filter-group" id="toolbar-demo-filters">