I am new to react and was using material ui. I was trying to place a card in a grid item.

here is my code:

<GridItem xs={12} sm={12} md={12} style={{ margin: "0rem" }}>
  <Card style={{ margin: "0rem" }}>
    <GridItem xs={2} sm={2} md={2}>
      {/* <Card style={{ margin: "0rem" }}> */}
      <GridItem xs={12} style={{ margin: "0rem" }}>
        <CustomOutlineInput
          style={{ margin: "0rem" }}
          id="coilID"
          label="Coil ID"
          variant="outlined"
          size="small"
        />
      </GridItem>
      {/* </Card> */}
    </GridItem>
  </Card>
</GridItem>;

However as you can see some extra spacing is generated in this way how do I remove this and make colums inside the grid item:

Also how do I add text boxes in a single row without increasing the spacing? each element is taking extra space: