¿Cómo puedo hacer que los niños de fila de flexbox se alineen? [duplicar]

Esta pregunta ya tiene respuestas aquí:

Solución del problema

Las filas flexibles no respetan el tamaño interno de las demás. Deberá establecer explícitamente algunos tamaños para que coincidan, o convertirlos a la cuadrícula CSS, que proporciona eso de forma inmediata.

.FlexAndCenter {
 display: flex;
 justify-content: center;
}
.Padding1REM {
 align-self: center;
 justify-self: center;
 min-width: 100px;
 max-height: 100px;
 max-width: 500px;
 padding: 1rem;
}
.ROWFLEX {
 flex-direction: column;
 display: flex;
 word-wrap: break-word;
 width: 50vw; /* <----------------------- HERE */
}
.BILD {
 align-self: center;
 justify-self: center;
 padding-right: 1rem;
}

<div class="FlexAndCenter Padding1REM">
 <div class="BILD">
 <img src="https://via.placeholder.com/80" />
 </div>
 <div class="ROWFLEX">
 <p>namn på vara: {vara} </p>
 <p>pris på vara: {pris}</p>
 <p>datum köpt: {datum}</p>
 <p>swishnummer: {swish}</p>
 </div>
</div>
<div class="FlexAndCenter Padding1REM">
 <div class="BILD">
 <img src="https://via.placeholder.com/80" />
 </div>
 <div class="ROWFLEX">
 <p>namn på vara: {vara} </p>
 <p>pris på vara: {pris}</p>
 <p>datum köpt: {datum}</p>
 <p>swishnummer: {swish} more words more words</p>
 </div>
</div>