estoy haciendo un diseño donde pongo un texto y una imagen con una información arriba de ella, pero me encuentro con el problema de que mi texto no se pone por debajo de la imagen cuando "puede" ya que mi propiedad flex
no lo permite como se puede ver en la imagen:
El código html
es el siguiente
<div className="profile">
<div className="leftP">
<h2>Detras del exito</h2>
<p>
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do
eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad
minim veniam, quis nostrud exercitation ullamco laboris nisi ut
aliquip ex ea commodo consequat. Duis aute irure dolor in
reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla
pariatur. Excepteur sint occaecat cupidatat non proident, sunt in
culpa qui officia deserunt mollit anim id est laborum
</p>
</div>
<div className="rightP">
<h4>********</h4>
<h6>CEO y Fundadora</h6>
<img src={profilePhoto} alt="ProfilePhoto" />
</div>
</div>
Y el css
es el siguiente:
.profile {
display: flex;
}
.leftP {
display: flex;
flex: 2;
flex-direction: column;
}
.rightP {
flex: 1;
position: relative;
margin-top: 0;
}
Mi pregunta es como hago para que mi texto luego del tamaño de mi div rightP
se ponga por debajo de la imagen para que se vea de esta manera:
He intentado usando la propiedad flex-grow
ya que tengo entendido que da tamaño y estaba intentando reducir el tamaño de esa columna pero no lo logre, no se si sea posible