Search Input with side button on Tailwind CSS - reactjs

Question

So i try to display and search bar with button on the right side of it but i keep geeting this view even though i have display it as flex and justify center, and even when i change it into row it still show up as image below
here is my code:
return (
<div className="p-2">
<div className="text-left pl-4 pb-4 font-bold text-3xl">
<h2>Detail SKU</h2>
</div>
<div className="p-2 justify-center mt-4 flex">
<form
onSubmit={(e) => {
e.preventDefault();
}}
>
<Autocomplete
style={{ width: "100%" }}
id="grouped-demo"
options={options.sort(
(a, b, index) => -b.firstLetter.localeCompare(a.firstLetter)
)}
groupBy={(option) => option.firstLetter}
getOptionLabel={(option) => option.title}
sx={{ width: 300 }}
renderInput={(params) => {
params.inputProps.onKeyDown = handleKeyDown;
return <TextField {...params} label="Search SKU" />;
}}
renderGroup={(params) => (
<li key={params.key}>
<GroupHeader>{params.group}</GroupHeader>
<GroupItems>{params.children}</GroupItems>
</li>
)}
/>
<Button variant="contained">Search</Button>
</form>
</div>
<Box sx={{ width: "100%", typography: "body1" }}>
<TabContext value={value} index={0} classes={{ root: useStyles.tab }}>
<Box sx={{ borderColor: "divider", p: 0 }}>
<TabList
index={0}
classes={{ root: useStyles.tab }}
onChange={handleChange}
variant="scrollable"
scrollButtons="auto"
aria-label="scrollable auto tabs example"
>
<Tab label="BOM" value="1" />
<Tab label="Routing" value="2" />
<Tab label="Depre" value="3" />
<Tab label="OMC" value="4" />
</TabList>
</Box>
<TabPanel style={{ padding: 10 }} value="1">
<div className="m-0 p-0" style={{ height: 400, width: "100%" }}>
<DataGrid {...data} components={{ Toolbar: GridToolbar }} />
</div>
</TabPanel>
<TabPanel value="2">Routing</TabPanel>
<TabPanel value="3">Depre</TabPanel>
<TabPanel value="4">OMC</TabPanel>
</TabContext>
</Box>
</div>
);
};
any help on it??, i've been figure it out but it seems dont help at all or where did do wrong here actually??

Answer 1

try removing display classname flex
<div className="p-2 justify-center mt-4">