Question: I want create design with image with button in same line but text not come middle of text

html and css code as follow:

```css
  .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;
  }
```

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

If anyone have idea plz help me in this

Plz check attach image for clarification

[![enter image description here](https://i.stack.imgur.com/LahcK.png)](https://i.stack.imgur.com/LahcK.png)

Answer: 
Maybe Something like this?

```css
.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;
}
```

```html
<div class="block-title">
<strong>Shop By Category</strong>
<button class="c-btn">View Profile</button>
</div>
```
You can assign to the button: `float:right;`

```css
button {
  float:right;
}
```

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

### update

```css
button {
  float:right;
}

.c-btn  {
  border: none;
  background-color: magenta;
  padding: 12px 48px 12px 24px;
  border-radius: 20px;
  color: #fff;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='7.41' height='12' viewBox='0 0 7.41 12'%3E%3Cpath d='M10,6,8.59,7.41,13.17,12,8.59,16.59,10,18l6-6Z' transform='translate(-8.59 -6)' fill='%23fff'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 24px center;
}
```

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