JSFiddle - React, Tailwind, and code Playground
HTML
<div class="container">
<div class="left">Ici une image</div>
<div class="right">
<p>Lorem, ipsum dolor sit amet consectetur adipisicing elit. Earum accusantium quidem et dolorum nihil vitae possimus quas illo blanditiis quos sequi repudiandae iusto ipsa reprehenderit laboriosam nam, incidunt maxime. Veniam.</p>
<p>Lorem, ipsum dolor sit amet consectetur adipisicing elit. Earum accusantium quidem et dolorum nihil vitae possimus quas illo blanditiis quos sequi repudiandae iusto ipsa reprehenderit laboriosam nam, incidunt maxime. Veniam.</p>
<p>Lorem, ipsum dolor sit amet consectetur adipisicing elit. Earum accusantium quidem et dolorum nihil vitae possimus quas illo blanditiis quos sequi repudiandae iusto ipsa reprehenderit laboriosam nam, incidunt maxime. Veniam.</p>
</div>
</div>
<div class="container">
<div class="left">Ici une image</div>
<div class="right">
<p>Court.</p>
</div>
</div>
CSS
.container {
display: flex;
justify-content: center; /* N'a d'effet que si les flex items laissent de la place horizontalement */
align-items: center;
width: 40rem;
margin-bottom: 1rem;
background-color: lightyellow;
outline: 3px double darkred;
}
.container > * {
padding: 1rem;
outline: 1px solid black;
}
.left {
flex: none;
margin-right: 10px;
}
.right {
text-align: center;
}