如何将 material-ui 图标右对齐？

Question

I have a dynamically generated list which is generated by the following code

           <list className = "todos-list">
                        {allTodos.map((todo, index)=> {
                            return (
                            <li className = "todo-element"> {todo} <DeleteButton id= {index} 
                            callBackFunction = {deleteItem}/> </li>)
                        }
                        )}
           </list>

now as you can see {todo} and are placed next to each other so in the output also they are just placed next to each other as shown in the image attached (please do see it)

the code to is shown below

<span className = "DeleteButton"><DeleteIcon onClick = {deleteMain}/></span>

Delete icon is taken from material-ui/icons now I am having a problem in positioning the delete button to the right so that in all list items it is at a uniform distance from the boundary,(please see the image attached you will get the problem )
Please do let me know what can I do here??

Answer 1

Try applying these styles:

todo-element class:

{
 width: 100%
}

Delete button:

{
 float: right
}

If you're using inline styles for button:

<DeleteButton style={{ float: 'right' }} id={index} callBackFunction = {deleteItem}/>

Answer 2

#parent-element {
position:absolute;
}
.DeleteButton{
position:relative;
right:5;
}

This could work.