How to fit logo and page title using Flexbox?

Question

Doubt

Here I want the logo to stick on the left-side and the title "Portraits by Raj Mhatre" to align in the center. I am new to coding html and css, so please go easy on me if this is really a noob question to ask.

HTML Code:

<div class="page-head">
            <!--page logo-->
            <div>
                <a href="portraitsbyrajmhatre.html">
                <img src="images/favicon.jpg" class="page_logo" width="150px" height="100px">
                </a>
            </div>
            <!-- Page Title -->
            <div class="page-title">
                <span style="font-size: 50px;">Portraits by Raj Mhatre</span><br>
                <span style="font-style: italic; margin-bottom: 50px;">Today's Moments <span style="color: #7a6017;">&#9909;</span> Tomorrow's Memory</span>
            </div>
        </div>

CSS Code:

/* Page Head */
.page-head{
   display: flex;
   border: 1px solid rebeccapurple;
   flex-direction: row;
}

/*Page title */
.page-title{
   border: 1px solid darkcyan;
   text-align: center;
   color: #7a6017;
   font-family: 'Montserrat', sans-serif;
   flex-shrink: 0;
   align-self: center;
}

/*Page Logo*/
.page_icon{
   width: 150px;
   height: 100px;
}