サイト模写をしていますが、ヘッダーの左のロゴとテキストを横並びにしたいです。

Question

こんにちは。お世話になります。

現象
ヘッダーの左のロゴとテキストが縦並びになっています。

期待値
ヘッダーの左のロゴとテキストをCSS gridかFlexboxを使って横並びにしたいです。

再現方法
index.htmlとstylesheet.cssを同じディレクトリに置き、index.htmlをブラウザで開いていただければ再現できます。

OS:Ubuntu Mate 19.10
ブラウザ:Google Chrome最新版

模写しているサイトは下記のサイトになります。ロゴの画像は著作権の問題で省略させていただきます。
iSara[イサラ]バンコクのノマドエンジニア育成講座

    <header>
        <div class="title">
            <div>
                <img class="header-logo" src="/assets/isaralogo.png" alt="">
                <p class="header-text">バンコクのノマドエンジニア講座</p>
            </div>
        </div>
        <div class="header-button-wrapper">
            <div class="header-button-text-wrapper">
                <a href="">
                    お問い合わせ / 資料請求はこちら
                </a>
            </div>
        </div>
    </header>

@charset "UTF-8";

/* 基本設定 */

* {
    margin: 0;
}

/* ヘッダー */

header {
    display: grid;
    grid-template-columns: 
        200px 1fr 1fr 200px;
    grid-template-rows:
        [header-top] 15px
        [header-middle] 40px
        [header-bottom] 15px;
}

.title {
    grid-column: 2 / -3;
    grid-row: header-middle; 
    display: flex;
    justify-content: center;
    align-items: center;
}

.title-wrapper {
    height: 40px;
    margin: 20px;
}

.header-logo {
    height: 40px;
}

.header-text {
    font-size: 15px;
    font-weight: bold;
}

.header-button-wrapper {
    display: flex;
    justify-content: center;
    align-items: center;
    grid-column: 3 / -2;
    grid-row: header-middle;
}

.header-button-text-wrapper {
    display: flex;
    justify-content: center;
    align-items: center;
    border-radius: 50px;
    font-size: 15px;
    height: 40px;
    width: 320px;
}

.header-button-text-wrapper a {
    padding: 12.5px 45px;
    border-radius: 50px;
    font-size: 12px;
    text-decoration: none;
    background-color: #da6b64;
    color: white;
}

Answer 1

.header-text {display:inline-block;}

少なくとも、元のサイトは上記の設定になっているようです。
（HTMLの構造は違いますが）

Comments

[退会済みユーザー]

できたら、CSS gridとflexboxを使ってヘッダーの左のロゴとテキストを横並びにしたいです。

[退会済みユーザー]

ご回答ありがとうございますm(_ _)m

Answer 2

現状のHTMLのままロゴ画像とタイトルを横並びにするだけならば、以下のコードを追加すればできます。
調整等はもちろん必要ですが。

  .title>div:first-child {
      display: flex;
  }

Comments

[退会済みユーザー]

横並びにできました。ありがとうございましたm(_ _)m