InputGroup does not display on same line as label when used in formgroup-inline

[melloware]

Describe the bug

Original ticket: https://github.com/primefaces/primereact/issues/4484

If you try to use an Label + InputGroup in an inline form, then they do not appear inline as expected.

I have added the following to my css overrides and it seems to be doing the trick for my specific example. I have not tested it against any other scenarios than my own. But thought I would just report it and share it here in case it helps someone else with the same problem.

div.formgroup-inline div.field div.p-inputgroup {
  display: inline-flex;
  width: auto;
}

It is also available in the attached codesandbox example (commented out, but you can uncomment to see it in action)

Reproducer

https://codesandbox.io/s/primereact-test-forked-e7vx24?file=/src/index.js

PrimeReact version

9.5.0

React version

18.x

Language

TypeScript

Build / Runtime

Create React App (CRA)

Browser(s)

No response

Steps to reproduce the behavior

Create an inline form and instead of directly using an InputNumber, wrap it in an InputGroup e.g.

<div className="formgroup-inline">
  <div className="field">
    <label htmlFor="exampleInput">
      This label should be on the same line
    </label>
    <div className="p-inputgroup">
      <InputNumber id="exampleInput" value={123} />
      <span className="p-inputgroup-addon">mm</span>
    </div>
  </div>
</div>

Expected behavior

The label should display inline with the input group, as is expected for an inline form