cssでimgの下揃えを教えてください。

Question

下記サイトの模写コーディングを行う中で現在詰まっている箇所があります。
https://isara.life/

上記サイトにアクセスしていただき、
・稼げるエンジニアに必要な５つのスキルとは？
の、イメージがうまく下揃えにならずpのテキスト箇所が上下バラバラで横並びになっています。

        <div class="skill-title">
          <p>稼げるエンジニアに必要な５つのスキルとは？</p>
        <div class="skills">
          <div class="skill">
            <img src="images/skill.jpg">
            <p>基礎的な<br>プログラミングスキル</p>
          </div>
          <div class="skill">
            <img src="images/sales.jpg">
            <p>案件獲得に必要な<br>営業力</p>
          </div>
          <div class="skill">
            <img src="images/document.jpg">
            <p>見積もり作成から<br>納品までの知識</p>
          </div>
          <div class="skill">
            <img src="images/plusone.jpg">
            <p>自分の付加価値を<br>高めるスキル</p>
          </div>
          <div class="skill">
            <img src="images/connection.jpg">
            <p>フリーランス同士の<br>横のつながり</p>
          </div>
        </div>
        </div>

.skill-title{
  width:95%;
  height:250px;
  margin:0 auto;
  background-color:white;
  border:2px solid #EBB94C;
  border-radius:5px;
}
.skills{
  display:flex;
  width:70%;
  margin:0 auto;
}
.skill{
  display:inline-block;
  padding:5px;
}
.skill img{
  width:auto;
  height:auto;
}
.skill p{
  font-size:12px;
  font-weight:lighter;
  margin-top: 10px;
  padding:5px;
}

デベロッパーツールの検証で確認して同じようにコードを組み込んでみたりしているのですが全部をコピペしてもうまく反映されなかったりするので、おそらくbootstrapなどのフレームワークを使用されているからかなと思っています。
私はbootstrapは使用せずにhtmlとcssだけで模写をしたいと思っているので、その場合はどのようにすればうまく行くかどなたか教えていただけないでしょうか？

ちなみに、親要素のskillにposition:relativeでimgにposition:absolute；bottom 0は画像は下揃えになりますがp要素のポジションも移動するためうまくいきませんでした、、、。

よろしくお願い致します。

Answer 1

姑息ですがimgをdivで囲って高さを指定した上でセルとして動作させるとか・・・
でもこれってimgの最大値を予め知っていなくてはいけないし、あまり現実的ではないかも
むしろ画像を編集して高さを揃えてしまうほうが楽だと思います

<style>
.skill-title{
  width:95%;
  height:250px;
  margin:0 auto;
  background-color:white;
  border:2px solid #EBB94C;
  border-radius:5px;
}
.skills{
  display:flex;
  width:70%;
  margin:0 auto;
}
.skill{
  display:inline-block;
  padding:5px;
}
.skill div{
height:70px;
display:table-cell;
vertical-align:bottom;
}
.skill p{
  font-size:12px;
  font-weight:lighter;
  margin-top: 10px;
  padding:5px;
}
</style>
<div class="skill-title">
<p>稼げるエンジニアに必要な５つのスキルとは？</p>
<div class="skills">
<div class="skill">
<div>
<img src="https://isara.life/wp-content/themes/isara_v2/img/skill.jpg">
</div>
<p>基礎的な<br>プログラミングスキル</p>
</div>
<div class="skill">
<div>
<img src="https://isara.life/wp-content/themes/isara_v2/img/sales.jpg">
</div>
<p>案件獲得に必要な<br>営業力</p>
</div>
<div class="skill">
<div>
<img src="https://isara.life/wp-content/themes/isara_v2/img/document.jpg">
</div>
<p>見積もり作成から<br>納品までの知識</p>
</div>
<div class="skill">
<div>
<img src="https://isara.life/wp-content/themes/isara_v2/img/plusone.jpg">
</div>
<p>自分の付加価値を<br>高めるスキル</p>
</div>
<div class="skill">
<div>
<img src="https://isara.life/wp-content/themes/isara_v2/img/connection.jpg">
</div>
<p>フリーランス同士の<br>横のつながり</p>
</div>
</div>
</div>

もしくは

.skill div{
height:70px;
position:relative;
}
.skill div img{
bottom:0;
position:absolute;
}

Answer 2

Flexでalight-itemsを指定してみてはどうですか？

Answer 3

display: block;
vertical-align: bottom;

こちらでうまくいきませんか？