左下配置にしたいがpadding marginが効かない。

前提

日付をボックスの左下に配置したい。

実現したいこと

日付をボックスの左下に配置したい。

発生している問題・エラーメッセージ

エラーメッセージ

該当のソースコード

<div class="lesson">
    <h3>My Challenge</h3>

     <div class="lesson-wrapper">
        <div class="lesson-wrapper1">
            <img src="top/brooke-cagle-g1Kr4Ozfoac-unsplash (1)@2x.png" alt="男女の会話">
            <p>もくもく会in大阪のコーディングイベントに参加してきました！！</p>
            <span>2020.06.28</span>
        </div>

        <div class="lesson-wrapper2">
            <img src="top/brooke-cagle-NoRsyXmHGpI-unsplash@2x.png" alt="女性の笑顔">
            <p>模写コーディングを１つ終わらせることができました！！次はもう少し難しいものに挑戦します！</p>
            <span>2020.07.02</span>
        </div>

        <div class="lesson-wrapper3">
            <img src="top/kevin-hendersen-MQ4eKnHtOUg-unsplash.png" alt="街並み">
            <p>「1冊ですべて身につくHTML&CSSとWebデザイン入門講座を完走しました！！</p>
            <span>2020.07.10</span>
        </div>

     </div>


    <a href="#" class="lesson-button">もっと見る</a>


</div><!---　レッスン一覧　------------------>

/*　レッスン一覧
---------------------------- */
.lesson {
text-align: center;
}

h3 {
text-align: center;
font-size: 32px;
padding: 60px;
}

.lesson p {
text-align: left;
font-size: 18px;
margin: 20px 23px 97px 20px;

}

.lesson-wrapper span {
font-size: 16px;
font-family: Helvetica Neue, Regular;
text-align: left;
margin-bottom: 20px;
margin-left: 20px;

}

.lesson-wrapper img {
width: 310px;
height: 172px;
}

/* レッスン一覧 */
.lesson-wrapper1 {
display: flex;
flex-direction: column;
width: 310px;
height: 370px;
background: #FFFFFF 0% 0% no-repeat padding-box;
box-shadow: 0px 3px 6px #00000029;
opacity: 1;
}

.lesson-wrapper2 {
display: flex;
flex-direction: column;
width: 310px;
height: 370px;
background: #FFFFFF 0% 0% no-repeat padding-box;
box-shadow: 0px 3px 6px #00000029;
opacity: 1;
}

.lesson-wrapper3 {
display: flex;
flex-direction: column;
width: 310px;
height: 370px;
background: #FFFFFF 0% 0% no-repeat padding-box;
box-shadow: 0px 3px 6px #00000029;
opacity: 1;
}

.lesson-wrapper {
display: flex;
justify-content: center;
gap: 15px;
margin-bottom: 63px;
}

/* もっと見るボタン */
.lesson-button {
margin-bottom: 100px;
padding: 17px 110px;
background: #FFFFFF 0% 0% no-repeat padding-box;
box-shadow: 0px 3px 6px #00000029;
border: 1px solid #EEEEEE;
border-radius: 5px;
opacity: 1;
font-size: 18px;
color: #333333;
}

試したこと

marginやpaddingでは上の文章の長さが違うので、3つ同じように指示が
できなかった。

補足情報（FW/ツールのバージョンなど）

ここにより詳細な情報を記載してください。

行動規範の内容に同意します

回答1件

ベストアンサー

カード要素(.lesson-wrapper1 ～ 3)の高さの固定をやめる。
.lesson p のmarginの下方の無意味に大きな価の設定をやめる。
日付要素(.lesson-wrapper span)のmargin-top: を auto; にする。

以上で文章の量に関係なく、日付はカードの最下部に表示されます。

css
1.lesson p {
2  text-align: left;
3  font-size: 18px;
4  margin: 20px; /* 修正 */
5}
6.lesson-wrapper span {
7  font-size: 16px;
8  font-family: Helvetica Neue, Regular;
9  text-align: left;
10  margin-bottom: 20px;
11  margin-left: 20px;
12  margin-top: auto; /* 追加 */
13}

あと、.lesson-wrapper1 ～ 3の設定は同じなので、ひとつにまとめましょう。

css
1.lesson-wrapper > div /* これでまとめて指定できる */
2{
3  display: flex;
4  flex-direction: column;
5  width: 310px;
6/*  height: 370px;  削除 */
7  background: #FFFFFF 0% 0% no-repeat padding-box;
8  box-shadow: 0px 3px 6px #00000029;
9  opacity: 1;
10}