Styled Card - Copy this React, Mui Component to your project

<Grid item xs={12} sm={6} sx={{ p: 2 }}> <Typography variant="subtitle1">Current Site Plan Files:</Typography> {Array.isArray(values.sitePlanFiles) && values.sitePlanFiles.length > 0 ? ( values.sitePlanFiles.map((file, index) => ( <Grid key={index} container spacing={1} sx={{ display: 'flex', flexDirection: 'column', // Stack items vertically border: "1px solid black", borderRadius: "2px", mb: 1, }} > <Grid item> <Button href={file instanceof File ? URL.createObjectURL(file) : file} target="_blank" variant="contained" color="primary" fullWidth > Site Plan File </Button> </Grid> <Grid item> <Button sx={{ lineHeight: "2", minWidth: "100%", padding: "6px 12px", backgroundColor: '#d32f2f', '&:hover': { backgroundColor: '#c62828', } }} variant="contained" color="secondary" onClick={() => handleRemoveFile(index, 'sitePlanFiles')} fullWidth > Remove </Button> </Grid> <Grid item> <Button variant="contained" component="label" fullWidth > Choose File <input type="file" hidden name={`sitePlanFiles ${index}`} inputProps={{ multiple: false }} onChange={(event) => { const files = Array.from(event.currentTarget.files); const updatedFiles = [...values.sitePlanFiles]; updatedFiles[index] = files[0] || null; setFieldValue('sitePlanFiles', updatedFiles); setSitePlanFiles(updatedFiles); // Update state }} /> </Button> </Grid> </Grid> )) ) : ( <Typography variant="body2" color="textSecondary"> No site plan files available. </Typography> )} </Grid> this chunk of code from update quote form i want that choose file button on next line of code for reponsiveness