There are two boxes (outerboxes
) side by side in a row. I made the height of the two boxes equal using flexbox. In each box, the text should be aligned from the top (i.e. below the image), and the button should be present at the bottom of the box.
How can I align the button to the bottom? I tried multiple ways to make a nested flex box, but nothing worked for me.
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>