How would go about to display items on same line in react? - css

Question

I am new to using react and i have started to write a program but i have hit a wall and don't know how to overcome it.
I am trying to display movie poster with their name and release date on the side of the poster. If you see the screenshot you can see thats not the case right now, the text is being placed below the poster.
How would i go about to make the poster and text side by side?
this is my render code if the problem is within there:
return (
<div className="App">
<h1>Movie logger app</h1>
<input value={word} onChange={handleChange} />
<button onClick={getMovieName}>Find Movie</button>
{data.map((item) => {
return <div key={item.id}>
<img src={item.poster} alt=""/> <h2>{item.title}</h2> <h4>{item.date}</h4>
</div>;
})}
</div>
);

Answer 1

This is more of a CSS question than a React question. You can try a flexbox layout, like so:
{data.map((item) => (
<div key={item.id} style={{ display: "flex" }}>
<img src={item.poster} alt="" />
<div style={{ marginLeft: 20, display: "flex", flexDirection: "column" }}>
<h2>{item.title}</h2>
<h4>{item.date}</h4>
</div>
</div>
))}

Answer 2

You could use bootstrap grid system to give each element the half of the screen.
https://getbootstrap.com/docs/4.0/layout/grid/
{data.map((item) => {
<div class="container">
<div class="row">
<div class="col-6">
<img src={item.poster} alt=""/>
</div>
<div class="col-6">
<h2>{item.title}</h2> <h4>{item.date}</h4>
</div>
</div>
</div>
})}
Another option could be to position your elements in a table that cover all the screen (not recommended )