material-uiのコンポーネントを二つ組み合わせて『オートコンプリート』と『ボタン』が 横並びになったコンポーネントを作りたいです。

Question

前提・実現したいこと

material-uiのコンポーネントを二つ組み合わせて『オートコンプリート』と『ボタン』が
横並びになったコンポーネントを作りたいです。

エラーメッセージ

該当のソースコード

import React from 'react';
import TextField from '@material-ui/core/TextField';
import Autocomplete from '@material-ui/lab/Autocomplete';
import {createStyles,makeStyles} from "@material-ui/core/styles"
import Button from '@material-ui/core/Button'
import Grid from '@material-ui/core/Grid';

export default function ComboBox() {
const classes = useStyle();

return (
    <>

//ここがオートコンプリート
<Autocomplete
id="combo-box-demo"
options={top100Films}
getOptionLabel={(option) => option.title}
style={{marginTop: 30 ,
width: 300 ,
marginLeft:"auto",
marginRight:"auto",}}
renderInput={(params) => <TextField {...params} label="Combo box" variant="outlined" />
}/>
//ここがボタン
<Button className={classes.myButton} variant="contained" color="secondary" type="submit">
検索
</Button>
//上記のままだと横並びにならないが、横並びで表示したい。
</>
);
}

上記のコードにおいて、ButtonとAutocompleteを横並びにするにはどのように記述すれば良いのでしょうか？

試したこと

『display:flexを使った横並びメニューの書き方』等を参考にしたが、上手くいかなかった。

補足情報（FW/ツールのバージョンなど）

ここにより詳細な情報を記載してください。

Comments

[退会済みユーザー]

ソースコードが読みづらいので質問を編集し、<code>をクリックしたら表示されるバッククオートで囲まれた部分に貼ってください。