título con botón en la misma línea usando html css

Quiero crear un diseño con una imagen con un botón en la misma línea pero el texto no viene en medio del texto

código html y css de la siguiente manera:

.block-title
 {
 display: flex;
 flex-wrap: wrap;
 justify-content: center;
 align-items: center;
 align-content: space-between;
 flex-direction: row;
 }
.block-title strong{
 flex-grow: 1;
 }

<div class="block-title">
 <strong>Shop By Category</strong>
 <button class="c-btn">View Profile</button>
</div>

Solución del problema

¿Quizás algo como esto?

.block-title
{
 display: flex;
 flex-wrap: wrap;
 justify-content: space-evenly;
 align-items: center;
 flex-direction: row;
 background-color:beige;
 padding:10px 20px;
}
.block-title strong{
 flex-grow: 1;
}
.c-btn {
 background-color:#f65f73;
 color:white;
 border-radius:20px;
 border:0px solid;
 height:40px;
 width:180px;
 text-align:left;
 padding-left:15px;
 font-size:20px;
}
button.c-btn:after {
 content:"\01F862";
 border-radius:50%;
 background-color:white;
 height:26px;
 width:26px;
 color:black;
 font-size:19px;
 display:flex;
 justify-content:center;
 float:right;
}

<div class="block-title">
<strong>Shop By Category</strong>
<button class="c-btn">View Profile</button>
</div>