MaterialUI Sliders- I want a list of sliders with text on either side

Question

As the title says i want to add sliders with text on either side of them. I am currently using the Stack tag to create a row with a slider and two text values on either side but am struggling to align them such that all sliders are the same horizontal size.

This is what I currently have. I am trying to make it so I have something like this

     Introvert -----o----- Extrovert 
   Spontaneous -----o----- Planning 
        Active -----o----- Passive 

such that the sliders are lined up. Here is my current code.

<ThemeProvider theme={theme}>
      <Container component="main">
        <CssBaseline />
        <Box
          sx={{
            marginTop: 8,
            display: 'flex',
            flexDirection: 'column',
            alignItems: 'center',
          }}
        >
            
          <Avatar sx={{ m: 1, bgcolor: 'secondary.main' }}>
            <PersonSearchIcon />
          </Avatar>
          <Typography component="h1" variant="h5">
            Personality Questionnaire
          </Typography>
          <Typography>
            Slide left for the former, right for the latter.
          </Typography>
          
          <Box component="form" noValidate onSubmit={handleSubmit} sx={{ mt: 3 }} alignItems="center">
            <Grid container spacing={2}>
              <Grid item xs={15}>
                {/* slider with question */}
                <Stack spacing={2} direction="row" sx={{ mb: 1 }} alignItems="center">
                <Typography>Introvert</Typography>
                <Slider
                    aria-label="Introvert vs Extrovert"
                    name="Introvert vs Extrovert"
                    defaultValue={3}
                    valueLabelDisplay="auto"
                    step={1}
                    marks
                    min={1}
                    max={5}
                />
                <Typography>Extrovert</Typography>
                </Stack>
              </Grid>
              <Grid item xs={12}>
              <Stack spacing={2} direction="row" sx={{ mb: 1 }} alignItems="center">
              <Typography>Spontaneous</Typography>
                <Slider
                    aria-label="Spontaneous vs Planning"
                    name="Spontaneous vs Planning"
                    defaultValue={3}
                    valueLabelDisplay="auto"
                    step={1}
                    marks
                    min={1}
                    max={5}
                />
                <Typography>Planning</Typography>
                </Stack>
              </Grid>
              <Grid item xs={12}>
              <Stack spacing={2} direction="row" sx={{ mb: 1 }} alignItems="center">
              <Typography>Active</Typography>
                <Slider
                    aria-label="Active vs Passive"
                    name="Active vs Passive"
                    defaultValue={3}
                    valueLabelDisplay="auto"
                    step={1}
                    marks
                    min={1}
                    max={5}
                />
                <Typography>Passive</Typography>
                </Stack>
              </Grid>
            </Grid>
          </Box>
        </Box>
      </Container>
    </ThemeProvider>
  );