Hay dos cajas (cajas outerboxes ) una al lado de la otra en una fila. Igualé la altura de las dos cajas usando flexbox. En cada cuadro, el texto debe estar alineado desde la parte superior (es decir, debajo de la imagen), y el botón debe estar presente en la parte inferior del cuadro. ¿Cómo puedo alinear el botón con la parte inferior? Intenté varias formas de hacer un cuadro flexible anidado, pero nada funcionó para mí.

CSS

 .rowDisplay { display: flex; } .outerbox { border: 1px solid black; } .buttonClass { /* tried flex box here as well*/ }

js

 <div className = rowDisplay> <div className = outerbox> <image src = 'path/to/image'> <div> <div className = textClass> {text} //The text here comes from a variable </div> <div className = buttonClass> <Button onClick={this.handleClickFunction}> Click Me </Button> </div> </div> </div> </div>