【CSS】横並びしたときの一部を高くしたいです

完成形はこちらです

3番目の要素だけタイトル部分の背景色が異なるのと高さが少しあります。

ただ、現状が以下の通りです。

nth-child(3)で高さを指定したりpaddingで記述しても下に広がってしまうので上にいきません。
調べても解決できなかったのでご質問させていただきました。
よろしくお願い致します。

HTML
1   <section class="p-price_list">
2          <div class="l-container">
3            <h2 class="c-title-center-medium">料金表</h2>
4            <div class="p-price_list_items">
5              <div class="p-price_list_item">
6                <div class="p-price_list_item_top"><h3>基礎プラン</h3></div>
7                <div class="p-price_list_item_price">
8                  <p class="p-price_list_item_price_main">59,000円~</p>
9                  <p class="p-price_list_item_price_tax">*月額（税抜価格）</p>
10                </div>
11                <div class="p-price_list_item_textArea">
12                  <p class="p-price_list_item_textArea_text c-textArea">カリキュラム作成</p>
13                  <p class="p-price_list_item_textArea_text c-textArea">TOEFL学習サポート</p>
14                  <p class="p-price_list_item_textArea_text c-textArea">週一回のビデオMTG</p>
15                </div>
16              </div>
17              <div class="p-price_list_item">
18                <div class="p-price_list_item_top"><h3>演習プラン</h3></div>
19                <div class="p-price_list_item_price">
20                  <p class="p-price_list_item_price_main">75,000円~</p>
21                  <p class="p-price_list_item_price_tax">*月額（税抜価格）</p>
22                </div>
23                <div class="p-price_list_item_textArea">
24                  <p class="p-price_list_item_textArea_text">カリキュラム作成</p>
25                  <p class="p-price_list_item_textArea_text">TOEFL学習サポート</p>
26                  <p class="p-price_list_item_textArea_text">週一回のビデオMTG</p>
27                  <p class="p-price_list_item_textArea_text">月二回の模試（解説付き）</p>
28                </div>
29              </div>
30              <div class="p-price_list_item">
31                <div class="p-price_list_item_top"><h3>おすすめ<br>志望校対策プラン</h3></div>
32                <div class="p-price_list_item_price">
33                  <p class="p-price_list_item_price_main">95,000円~</p>
34                  <p class="p-price_list_item_price_tax">*月額（税抜価格）</p>
35                </div>
36                <div class="p-price_list_item_textArea">
37                  <p class="p-price_list_item_textArea_text">カリキュラム作成</p>
38                  <p class="p-price_list_item_textArea_text">TOEFL学習サポート</p>
39                  <p class="p-price_list_item_textArea_text">週一回のビデオMTG</p>
40                  <p class="p-price_list_item_textArea_text">月二回の模試（解説付き）</p>
41                  <p class="p-price_list_item_textArea_text">週一の英語面接対策</p>
42                </div>
43              </div>
44              <div class="p-price_list_item">
45                <div class="p-price_list_item_top"><h3>フレックス</h3></div>
46                <div class="p-price_list_item_price">
47                  <p class="p-price_list_item_price_main">60,000円~~</p>
48                  <p class="p-price_list_item_price_tax">*月額（税抜価格）</p>
49                </div>
50                <div class="p-price_list_item_textArea">
51                  <p class="p-price_list_item_textArea_text">＊別途ご相談ください</p>
52                </div>
53              </div>
54
55            </div>
56          </div>
57        </section>
58

scss
1
2.p-price_list {
3  margin-top: 90px;
4
5  &_items {
6    display: flex;
7    margin-top: 106px;
8  }
9
10  &_item {
11    width: calc(25% - 7px * 3 / 4);
12    height: 100%;
13    &:not(:first-child) {
14      margin-left: 7px;
15    }
16    text-align: center;
17    border:.5px solid $main_blue;
18
19    &:nth-child(3) {
20      .p-price_list_item_top {
21        height: 96px;
22        background:$yellow;
23        h3 {
24          color:$white;
25        }
26      }
27    }
28  
29
30    &_top {
31      background:$main_blue;
32      display: flex;
33      align-items: center;
34      justify-content: center;
35      height: 60px;
36      h3 {
37        @include fz(16,14);
38        color:$white;
39      }
40    }
41
42    &_price {
43      margin:30px 0 48px;
44      &_main {
45        @include fz(25,18);
46        font-weight: bold;
47        color:$main_blue;
48      }
49      &_tax {
50        @include fz(16,14);
51        margin-top: 14px;
52      }
53    }
54
55    &_textArea {
56      display: flex;
57      flex-direction: column;
58      align-self: start;
59      padding:0 24px;
60      display: block;
61      &_text {
62        @include fz(16,14);
63        @include lh(1.6);
64        &:not(:first-child) {
65          margin-top: 20px;
66        }
67        position: relative;
68        display: inline-block;
69        padding-left: 11px;
70        &::before {
71          content:'';
72          display: block;
73          position: absolute;
74          top:10px;
75          left:-11px;
76          width: 14px;
77          height: 8px;
78          margin-bottom: auto;
79          border-left: 3px solid $main_blue;
80          border-bottom: 3px solid $main_blue;
81          transform:translateY(-50%) rotate(-45deg);
82          
83        }
84      }
85    }
86
87  }
88}

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

回答2件

ご回答ありがとうございます。
無事解決できました！

投稿2021/08/11 01:08

kogari

総合スコア12

ベストアンサー

p-price_list_itemの構造を

HTML
1<div class="p-price_list_item">
2    <div class="p-price_list_item_top"><h3>基礎プラン</h3></div>
3    <div class="p-price_list_item_desc">
4        <div class="p-price_list_item_price">...</div>
5        <div class="p-price_list_item_textArea">...</div>
6    </div>
7</div>

のように変える。

そしてp-price_list_item_descに固定のheightを与える。

p-price_list_itemsにalign-items: flex-end;を設定する。

確認はしていませんが、これで行けそうな気がしますので、やってみてください。

投稿2021/08/10 15:42