Bottom align div inside flex container

Question

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>

Answer 1

You can try with nested grids:

.rowDisplay {
  display: flex;
  width: 100px;
}
.outerbox {
  display: grid;
  grid-template-rows: auto 1fr;
  border: 1px solid black;
  margin: 1em;
}
.buttonClass {
  align-self: end;
  border: 1px solid black;
  margin: 1em;
  padding: .5em;
}
.content {
  display: grid;
  grid-template-rows: 1fr auto;
  justify-items: center;
}
.textClass {
  align-self: start;
  margin: .5em;
}

<div class="rowDisplay">
  <div class="outerbox">
    <image src="https://picsum.photos/150" />
    <div class="content">
      <div class="textClass">
         text text text text text
      </div>
      <div class="buttonClass"> 
         Button
      </div>
    </div>
  </div>
  <div class="outerbox">
    <image src="https://picsum.photos/150">
    <div class="content">
      <div class="textClass">
         text 
      </div>
      <div class="buttonClass"> 
         Button
      </div>
    </div>
  </div>
</div>