flexやgridって改めて便利だなと思ったこと

以下の図のようなよくあるレイアウトの場合、
これまではposition: absolute;を使わないと実現出来ませんでした。（あるいはjsか）

flexで組む場合

html

<div class="wrap">
  <div class="inner">
    <div class="foo">
      <img src="test.png">
      <p>hogehogehogehogehogehogehogehogehogehogehogehogehogehogehogehoge</p>
    </div>
    <div class="bar">
      <p>fugafuga</p>
    </div>
  </div>
  <div class="inner">
    <div class="foo">
      <img src="test.png">
      <p>hogehoge</p>
    </div>
    <div class="bar">
      <p>fugafuga</p>
    </div>
  </div>
</div>

flex.css

.wrap {
  display: flex;
  word-break: break-word;
}
.inner {
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  width: 50%;
  padding: 10px;
  margin: 0 10px;
  border: 1px solid #eee;
}
.foo img {
  width: 100%;	
}
.bar {
  align-self: flex-end;
  background: #eee;
}

gridの場合

※ htmlは同じなので割愛

grid.css

.wrap {
  display: grid;
  grid-template-columns: repeat(auto-fit, 50%);
  word-break: break-word;
}
.inner {
  display: grid;
  padding: 10px;
  margin: 0 10px;
  border: 1px solid #eee;
}
.foo img {
  width: 100%;
}
.bar {
  align-self: flex-end;
  justify-self: flex-end;
  background: #eee;
}

gridはまだそこまでガツガツ使っていないので、この方が簡潔に書ける等ありましたらコメントいただきたいです！

ちょっとしたことですが、こういうレイアウトを組む場合に少しでも考える時間が減ると良いかなと思います。