isara模写 同名クラスの一部を独立をさせたい

Question

質問内容

isaraの模写コーディングの練習をしています。
参考ページにおいて、isaraで学べる内容という項目があるのですが、
自分のソースコードを見てわかる通り、2つのmenuクラスで縦幅が同じになってしまいます。
参考ページの様にそれぞれ独立させて縦幅を作るにはどうしたらよいでしょうか。
参考ページ
https://isara.life/

該当のソースコード

<div class="menu-wrapper">
        <div class="menu-top">
            <h2>iSara[イサラ]で学べる内容</h2>
            <p>渡航前の事前課題と渡航中に学べることの一覧です。</p>
        </div>

        <div class="menus">
            <div class="menu">
                <h2>渡航前の事前学習</h2>
                <p>０から始めるプログラミング事前学習講座</p>
                <p>参加者グループコミュニティ</p>
                <p>チャットサポート</p>
                <p>事前スカイプコンサル</p>
                <p>環境構築の事前学習</p>
                <p>jQueryの事前学習講座</p>
                <p>Bootstrapの事前講座</p>
                <p>PHP / Mysqlの事前学習講座</p>
                <p>稼ぐためのHTML/CSS講座</p>
                <p>WordPressの事前学習講座</p>
            </div>

        <div class="menu">
            <h2>バンコク渡航中</h2>
            <p>フリーランス独立術講座</p>
            <p>実際の実務案件をこなす</p>
            <p>ノマドフリーランス体験</p>
            <p>バンコク生活体験</p>
            <p>クラウドソーシング活用講座</p>
            <p>フリーランスのための営業講座</p>
        </div>

    </div>

    </div>

.menu-wrapper {
    display: flex;
    flex-direction: column;
    align-items: center;
    background-image: url('images/classbg.jpg');
    background-size: cover;
    padding-bottom: 100px;
}

.menu-top {
    text-align: center;
    padding-top: 100px;
    letter-spacing: 2px;
    line-height: 40px;
}

.menu-top h2 {
    font-size: 28px;
    font-weight: bold;
    color: #ffffff;
}

.menu-top p {
    font-size: 16px;
    font-weight: bold;
    color: #ffffff;
}

.menus {
    display: flex;
}

.menu {
    margin: 50px 15px 0px 15px;
    text-align: center;
    border-radius: 5px;
    width: 371px;
    background: #016EA9;
    padding: 0px 2px 2px 2px;
}

.menu h2{
    font-weight: bold;
    font-size: 20px;
    padding: 15px;
    color: #ffffff;
}

.menu p{
    line-height: 50px;
    background: #fff;
    font-weight: bold;
    color: #000;
    font-size: 16px;
    margin: 0px;
    padding: 0px;
    border-bottom: 1px dotted #e5e5e5;
}

.menu p:last-child {
    border-radius: 0px 0px 5px 5px;
}

Answer 1

記載されているCSSの下記の部分でdisplay: flex;を利用されているのが原因です。
「flex」を使用すると、デフォルトで高さがそろいます。

.menus {
    display: flex;
}

以下のようにalign-itemsを利用すると解決します。

.menus {
    display: flex;
　　align-items: baseline;
}

Comments

[chiko.unagi]

できました！ありがとうございます！