title with button in same line using html css-CodePudding

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

html code as follow:

<div >
<strong>Shop By Category</strong>
<button >View Profile</button>
</div>

Css as follows

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

If anyone have idea plz help me in this

Plz check attach image for clarification

CodePudding user response：

Maybe Something like this?

.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 >
<strong>Shop By Category</strong>
<button >View Profile</button>
</div>

CodePudding user response：

For this you need to set justify-content: space-between; as opposed to center

CodePudding user response：

You can assign to the button: float:right;

button {
  float:right;
}

<div >
<strong>Shop By Category</strong>
<button >View Profile</button>
</div>

update

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,");
  background-repeat: no-repeat;
  background-position: right 24px center;
}

<div >
  <strong>Shop By Category</strong>
  <button >View Profile</button>
</div>

CodePudding user response：

Are you trying to do this?

.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;
}
.btn-1 {
  background-color: #df3232;
}
.btn-1 .round {
  background-color: #ffffff;
}

a {
  text-decoration: none;
  border-radius: 30px;
  padding: 12px 53px 12px 23px;
  color: #fff;
  text-transform: uppercase;
  font-family: sans-serif;
  font-weight: bold;
  position: relative;
  transition: all 0.3s;
  display: inline-block;
}
a span {
  position: relative;
  z-index: 3;
}
a .round {
  border-radius: 50%;
  width: 38px;
  height: 38px;
  position: absolute;
  right: 3px;
  top: 3px;
}
a .round i {
  color: #df3232;
  position: absolute;
  top: 50%;
  margin-top: -6px;
  left: 50%;
  margin-left: -4px;
}

.c_btn {
  font-size: 14px;
  line-height: 1.45;
}

<head>
<link href="//maxcdn.bootstrapcdn.com/font-awesome/4.1.0/css/font-awesome.min.css" rel="stylesheet">
</head>
<body>

  <div >
    <strong>Shop By Category</strong>
    <div>
      <a href="" >
        <span >View profile</span>
        <span ><i ></i></span>
      </a>
    </div>
</body>
</html>