[CSS] ヘッダーのレイアウトを調節したい

Question

webページを作成中で、ヘッダー領域のレイアウトを調節したいと思っています。

具体的には、図中のtagと日付を同じ高さになるようにしたいと思っています。
tag部分を<ul>で書き、背景色をつけたくない日付け部分は<div>として、flexで表示すれば高さが揃うと思ったのですが、うまくいきません。

動かしながら書いたので、すごくごちゃついていると思いますが、以下該当箇所のソースコードです。

        <header>
            <h1 class="article-title"> 網走地区 マウンテンゴリア保安組合 決起集会 </h2>

                <div class="tag-and-date">
                    <div class="post-tag">
                        <ul>
                            <li><a href="~.html">tag1</a></li>
                            <li><a href="~.html">tag1</a></li>
                            <li><a href="~.html">tag2</a></li>
                        </ul>
                    </div>
                    <div class="date-time">
                        <p>2020/05/09 Stu.</p>
                    </div>
                </div>
        </header>

/* post tag & datetime */

div.tag-and-date {
    position: relative;
    display: flex;
}

div.post-tag ul {
    list-style-type: none;
    display: flex;
}

div.post-tag ul li {
    font-size: x-small;
    background-color: rgba(241, 240, 240, 0.916);
    padding: 0.4em;
    margin: 0.5em;
    text-align: center;
    border-radius: 0.45em;
}

div.post-tag a {
    text-decoration: none;
    color: rgba(168, 167, 167, 0.937);
}

div.date-time {
    font-size: small;
    margin-left: auto;
}

html,cssを触るのは今日で２日目なのでどうか優しくお願いします。。

Answer 1

align-items: center;で上下真ん中揃いにしてやれば、いい感じになるんじゃないかなーと。

div.tag-and-date {
    position: relative;
    display: flex;
    align-items: center;
}

Comments

[退会済みユーザー]

良い感じになりました！ありがとうございます！
因みにこれは架空の組織で、実在の人物や団体などとは関係ありません。

[Yorrie]

網走マウンテンゴリラ保安協会…一体何者なんだ…と悩んでいたので助かりました。ありがとうございます。