Material UI grid with IntputLabel and Input placed in horizontal row: how to ask vertical-align to be middle for the label?

I have pretty standard React Material UI grid with InputLabel's and Input's placed in horizontal row. The code is:

const Container = (props) => <Grid container {...props} />;
const Item = (props) => <Grid item xs={1} {...props} />;
const ContainerItem = (props) => <Grid container item {...props} />;

function App() {
  return (
    <div>
      <MuiThemeProvider theme={ucs_theme}>
        <Container>
          <ContainerItem>
            <Item>
              <InputLabel htmlFor="m_gen_ref_serie">Serie</InputLabel>
            </Item>
            <Item>
              <Input type="text" id="m_gen_ref_serie" />
            </Item>
            <Item>
              <InputLabel htmlFor="m_gen_ref_serie2">Serie 2</InputLabel>
            </Item>
            <Item>
              <Input type="text" id="m_gen_ref_serie2" />
            </Item>
            <Item>
              <InputLabel htmlFor="m_gen_ref_serie3">Serie 3</InputLabel>
            </Item>
            <Item>
              <Input type="text" id="m_gen_ref_serie3" />
            </Item>
          </ContainerItem>
          <ContainerItem>
            <Item>
              <InputLabel htmlFor="m_gen_ref_serie">Serie</InputLabel>
            </Item>
            <Item>
              <Input type="text" id="m_gen_ref_serie" />
            </Item>
            <Item>
              <InputLabel htmlFor="m_gen_ref_serie2">Serie 2</InputLabel>
            </Item>
            <Item>
              <Input type="text" id="m_gen_ref_serie2" />
            </Item>
            <Item>
              <InputLabel htmlFor="m_gen_ref_serie3">Serie 3</InputLabel>
            </Item>
            <Item>
              <Input type="text" id="m_gen_ref_serie3" />
            </Item>
          </ContainerItem>
        </Container>
      </MuiThemeProvider>
    </div>
  );
}

And full example is available: https://codesandbox.io/s/react-final-form-material-ui-example-forked-f0ir9?file=/src/index.js

Be aware, that my codesandbox example uses some theming, but the problem is not affected (not solved) by this theming (at least by this kind of theming).

I have problems and my question is about the placement of the InputLabel (rendered as HTML label) text - it is placed left-top. The left-placement is OK. The problem is that I don't like that the text is placed as top (some console entries who some strange margin-bottom). I would like to set vertical-align="middle" for this text. But there is not such property for InputLabel. How can achieve vertical-align="middle" effect for my labels (text of the labeld) in the Material UI grid?

Maybe I have to use some strange intermediate components like Paper?

Solution

You can edit your items alignment by using the props alignItems

Just look at the documentation here for more informations, you can also use CSS rules on your Grid item to edit the placement