Is there a way to achieve the same layout without using position: absolute for the "Hello There" button? I want to remove that CSS property while keeping the design intact. Any better suggestions? Feel free to check out my codesandbox:
CODESANDBOX -----> CLICK HERE
<MainContainer>
<Stack spacing={1}>
{products?.map((product) => (
<ProductItem
key={product.id}
name={product.name}
description={product.description}
/>
))}
</Stack>
<Stack
alignItems={"center"}
sx={{
marginTop: 2,
display: "flex",
left: 0,
right: 0
}}
>
<Button variant="outlined" sx={{ bgcolor: "white" }}>
Hello There
</Button>
</Stack>
</MainContainer>