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>
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <link rel="stylesheet" href="">
    <script src=""></script>
    <script src=""></script>
    <style type="text/css">
        .model-title {
	  display: inline-block;
    <div class="container">  
      	<h3 class="model-title">Product Title</h3>
        <a href="#">
          <span class="glyphicon glyphicon-pencil"></span>

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>


Comment posted by Temani Afif

simply put the link inside the title

Comment posted by

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?