Align Items one below the other in Semantic UI React - html

Question

Hi people, I am using Semantic UI React for my project. Here I am rendering some content on a Modal. Here you search for the movies and click on add and it adds it below. The problem is that I want the movie list to be aligned with the start of the Search bar. I'm not able to do it. Is there any way using Grid that I can achieve it?
Here is my code:
import React, {useState, useEffect} from 'react';
import {Icon, Button, Modal, Input, Item} from 'semantic-ui-react'
const CreateMovieListModal = (props) => {
const [movieTitle, setMovieTitle] = useState('');
const [movieList, setMovieList] = useState([]);
function handleMovieChange (event, data) {
setMovieTitle(data.value);
}
function addMovie () {
const newMovies = [...movieList, movieTitle];
setMovieList(newMovies);
setMovieTitle('');
}
function showMovieList () {
return movieList.map((currentMovie)=> {
return (
<Item.Group>
<Item>
<Item.Image size='tiny' src='https://react.semantic-ui.com/images/wireframe/image.png' />
<Item.Content verticalAlign='middle'>
<Item.Header as='a'>{currentMovie}</Item.Header>
</Item.Content>
</Item>
</Item.Group>
)
})
}
return (
<Modal open={props.isOpen} onClose={props.onClose}>
<Modal.Header>Add a new list</Modal.Header>
<div style={{marginTop: '10px'}}>
<center>
<Input value={movieTitle} loading={false}
style={{width: '50%'}}
onChange={handleMovieChange}
placeholder='Search For Movies'
/>
<Button onClick={addMovie}>Add Movie</Button>
</center>
</div>
<Modal.Content scrolling>
<div>
{showMovieList()}
</div>
</Modal.Content>
<Modal.Actions>
<Button primary>
Save <Icon name='save' />
</Button>
</Modal.Actions>
</Modal>
);
};
export default CreateMovieListModal;

Answer 1

you need to wrap Input and Movie list into a div, and apply your <center> on that wrapper div:
<center>
<div> <!-- wrapper div -->
<Input value={movieTitle} loading={false}
style={{width: '50%'}}
onChange={handleMovieChange}
placeholder='Search For Movies'
/>
<Button onClick={addMovie}>Add Movie</Button>
<Modal.Content scrolling>
<div>
{showMovieList()}
</div>
</Modal.Content>
</div>
</center>