How do I move the Delete and Add icon to the right of the input fields using Grid?

user_19663206 0
Viewed 26

Here's what I am able to create

My UI

And here is what I want to achieve: The aspiration

Here's my code:

<Grid container spacing={3}>        
   <Grid item md={4} xs={15}></Grid>
   <Grid item md={4} xs={15}></Grid>
   <Grid item md={4} xs={15}></Grid>
   <Grid item md={3} xs={15}><TrashIcon> <AddIcon></Grid>
</Grid>

Additional (Edited) How do I align the grid fields in the bottom to the ones on top rows? new confusion but have a limit on questions per hour

reactjs grid css
1 Answers

You can use auto-layout feature of the Grid:

The Auto-layout makes the items equitably share the available space. That also means you can set the width of one item and the others will automatically resize around it.

<Grid container spacing={3}>
  <Grid item md xs={12}>
    <input style={{ width: "100%" }} />
  </Grid>
  <Grid item md xs={12}>
    <input style={{ width: "100%" }} />
  </Grid>
  <Grid item md xs={12}>
    <input style={{ width: "100%" }} />
  </Grid>
  <Grid item md="auto" xs={12}>
    <TrashIcon /> <AddIcon />
  </Grid>
</Grid>

Working example

user_49802150
Related