Solution 1 :

For placing 2 elements on the same line just use display: inline-block; property and if you want to use edit icon then you can use bootstrap icon: source.

<!DOCTYPE html>
<html>
  <head>
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
    <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
    <style type="text/css">
        .model-title {
	  display: inline-block;
        }
    </style>
  </head>
  <body>
    <div class="container">  
      	<h3 class="model-title">Product Title</h3>
        <a href="#">
          <span class="glyphicon glyphicon-pencil"></span>
        </a>
      </p> 
    </div>
  </body>
</html>

Problem :

I want to have an edit icon on the same line as my product title. I thought I could use span or just set both elements to display: inline-block; But I’m having trouble getting this to work.

.model-title {
  display: inline-block;
}

.model-edit {
  display: inline-block;
}
<h3 class="model-title">Product Title</h3>
<a href="#"><i class="model-edit fa fa-pencil"></i></a>

Comments

Comment posted by Temani Afif

simply put the link inside the title

Comment posted by jsfiddle.net/0bLvmxof

This does work, both logically and by judging by this jsfiddle –

Comment posted by Kawaljit Singh

I think your code is working. What’s the issue?

By