画像を親要素の下揃えに配置したいです

Question

imgに対して vertical-align: bottom; を指定することで、min-height: 591px; の下揃えになると思ったのですが全くimgが動きませんでした。どのような指定をすればimgは下揃えになるのか教えていただきたいです。

        <section class="third_section_text">
          <h3 class="third_section_main">タイトル</h3>
          <p class="third_section_sub">本文</p>
          <img src="./img/third_3.png" alt="画像">
        </section>

.third_section_text {
  min-height: 591px;
}

.third_section_text img {
ｃ
}

Answer 1

positionだと本文量が多くなったときに画像とテキストが重なってしまうので
flexboxの方が適しているんじゃないでしょうか？
(pタグ自体にclassがついてるので、それほど長くなる想定ではないのかも？と思いながら)

.third_section_text {
  padding: 1em;
  min-height: 591px;
  background: plum;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  align-items: flex-start;
}

.third_section_text img {
  margin-top: auto;
}

<section class="third_section_text">
<h3 class="third_section_main">タイトル</h3>
<p class="third_section_sub">本文 / いろはにほへと ちりぬるを わかよたれそ つねならむ うゐのおくやま けふこえて あさきゆめみし ゑひもせすんいろはにほへと ちりぬるを わかよたれそ つねならむ うゐのおくやま けふこえて あさきゆめみし ゑひもせすん<br>いろはにほへと ちりぬるを わかよたれそ つねならむ うゐのおくやま けふこえて あさきゆめみし ゑひもせすん<br>いろはにほへと ちりぬるを わかよたれそ つねならむ うゐのおくやま けふこえて あさきゆめみし ゑひもせすん<br>いろはにほへと ちりぬるを わかよたれそ つねならむ うゐのおくやま けふこえて あさきゆめみし ゑひもせすん本文 / いろはにほへと ちりぬるを わかよたれそ つねならむ うゐのおくやま けふこえて あさきゆめみし ゑひもせすんいろはにほへと ちりぬるを わかよたれそ つねならむ うゐのおくやま けふこえて あさきゆめみし ゑひもせすん<br>いろはにほへと ちりぬるを わかよたれそ つねならむ うゐのおくやま けふこえて あさきゆめみし ゑひもせすん<br>いろはにほへと ちりぬるを わかよたれそ つねならむ うゐのおくやま けふこえて あさきゆめみし ゑひもせすん<br>いろはにほへと ちりぬるを わかよたれそ つねならむ うゐのおくやま けふこえて あさきゆめみし ゑひもせすん本文 / いろはにほへと ちりぬるを わかよたれそ つねならむ うゐのおくやま けふこえて あさきゆめみし ゑひもせすんいろはにほへと ちりぬるを わかよたれそ つねならむ うゐのおくやま けふこえて あさきゆめみし ゑひもせすん<br>いろはにほへと ちりぬるを わかよたれそ つねならむ うゐのおくやま けふこえて あさきゆめみし ゑひもせすん<br>いろはにほへと ちりぬるを わかよたれそ つねならむ うゐのおくやま けふこえて あさきゆめみし ゑひもせすん<br>いろはにほへと ちりぬるを わかよたれそ つねならむ うゐのおくやま けふこえて あさきゆめみし ゑひもせすん本文 / いろはにほへと ちりぬるを わかよたれそ つねならむ うゐのおくやま けふこえて あさきゆめみし ゑひもせすんいろはにほへと ちりぬるを わかよたれそ つねならむ うゐのおくやま けふこえて あさきゆめみし ゑひもせすん<br>いろはにほへと ちりぬるを わかよたれそ つねならむ うゐのおくやま けふこえて あさきゆめみし ゑひもせすん<br>いろはにほへと ちりぬるを わかよたれそ つねならむ うゐのおくやま けふこえて あさきゆめみし ゑひもせすん<br>いろはにほへと ちりぬるを わかよたれそ つねならむ うゐのおくやま けふこえて あさきゆめみし ゑひもせすん本文 / いろはにほへと ちりぬるを わかよたれそ つねならむ うゐのおくやま けふこえて あさきゆめみし ゑひもせすんいろはにほへと ちりぬるを わかよたれそ つねならむ うゐのおくやま けふこえて あさきゆめみし ゑひもせすん<br>いろはにほへと ちりぬるを わかよたれそ つねならむ うゐのおくやま けふこえて あさきゆめみし ゑひもせすん<br>いろはにほへと ちりぬるを わかよたれそ つねならむ うゐのおくやま けふこえて あさきゆめみし ゑひもせすん<br>いろはにほへと ちりぬるを わかよたれそ つねならむ うゐのおくやま けふこえて あさきゆめみし ゑひもせすん</p>
<img src="https://picsum.photos/200/150" alt="画像">

Answer 2

.third_section_textをposition:relativeにしてimgをabsoluteにすればよいのでは？

<style>
.third_section_text {
  min-height: 591px;
  background-Color:gray;
position:relative;
}
.third_section_text img {
position:absolute;
bottom:0;
}
</style>
<section class="third_section_text">
<h3 class="third_section_main">タイトル</h3>
<p class="third_section_sub">本文</p>
<img src="./img/third_3.png" alt="画像" width=100 height=100>
</section>