How to align icon in material Grid item to the right always even screen change

Question

I learn JavaScript React and now I have this question:

I have this Codesandbox

The problem I can't get the icon on the image below to stay to the right of the input

I want it to be like this:

I have tried using material Grid in various ways but I think I don't understand how to use wrapping, like wrap="nowrap".

I also tried like <Grid item style={{ position: 'absolute', bottom: 5, right: 5 }}> but the icon is outside the container.

Answer 1

Try to use a display: flex in the tag that includes the input and the icon instead of grids. https://css-tricks.com/snippets/css/a-guide-to-flexbox/ it may help you.

<div className="Test">
     <input className="form-control"
            placeholder="File Title"
            value={"theTitle"}
            type="text"/>
      <Avatar />
</div>

and the css is just

.Test {
 display: flex;
}