[autocomplete] `display` inconsistent with other form controls

Duplicates

• I have searched the existing issues

Latest version

• I have tested the latest version

Steps to reproduce 🕹

Link to live example: https://codesandbox.io/s/pedantic-tamas-1kzrk5?file=/demo.js

Steps:

1. The example above shows that components inline with Autocomplete always get wrapped to a new line.
2. Place a component next to an Autocomplete and notice it always goes to the next line.

Current behavior 😯

Buttons and components that follow the Autocomplete get wrapped to the next line.

Expected behavior 🤔

I would expect if space allows that components would stay on the same line. For example if I would like to place a related button to the right of an Autocomplete it is always wrapped.

Context 🔦

I am trying to place a button to the right of the Autocomplete.

Your environment 🌎

  System:
    OS: macOS 12.5
  Binaries:
    Node: 18.12.1 - ~/.nvm/versions/node/v18.12.1/bin/node
    Yarn: Not Found
    npm: 8.19.2 - ~/.nvm/versions/node/v18.12.1/bin/npm
  Browsers:
    Chrome: 108.0.5359.124
    Edge: Not Found
    Firefox: 108.0.1
    Safari: 15.6
  npmPackages:
    @emotion/react: ^11.10.5 => 11.10.5
    @emotion/styled: ^11.10.5 => 11.10.5
    @mui/base:  5.0.0-alpha.112
    @mui/core-downloads-tracker:  5.11.2
    @mui/icons-material: ^5.11.0 => 5.11.0
    @mui/material: ^5.11.1 => 5.11.2
    @mui/private-theming:  5.11.2
    @mui/styled-engine:  5.11.0
    @mui/system:  5.11.2
    @mui/types:  7.2.3
    @mui/utils:  5.11.2
    @types/react:  18.0.26
    react: 18.2.0 => 18.2.0
    react-dom: 18.2.0 => 18.2.0
    typescript:  4.9.4

Start with the linked CodeSandbox demo.js and reproduce the Autocomplete layout issue beside a button or other component. Compare its display behavior with the other form controls mentioned in the title. Done means adjacent components remain on the same line when space allows, without changing the expected wrapping behavior.