Ruby Rails veiw trying to display title (h1) on same line as links

Question

I have a show view which displays the model (post) name, in H1, as well as "edit" and "delete" buttons for the post.

I wish to display the the Title (H1) on the same line as the edit and delete buttons.

I list below what I currently have and then below that what I have tried, so far unsuccessfully, to put all onto the same line.

views

<h1><%= @post.title %></h1>
<% if can? :edit, @post %>
  <%= link_to 'Edit', edit_post_path(@post), class: "btn-warn" %>
<% end %>
<% if can? :destroy, @post %>
  <%= link_to 'Delete', @post, method: :delete, 
      data: { confirm: 'Are you sure?' }, class: "btn-alert" %>
<% end %>

I have tried

(1) adding float left to above e.g. and some CSS as well as adding this to view

css

.article-face-img{
    float: left;
    padding: .8em;
}

view becomes

<div class= "article-face-img"> 
  <h1><%= @post.title %></h1>
  <% if can? :edit, @post %>
    <%= link_to 'Edit', edit_post_path(@post), class: "btn-warn" %>
  <% end %>
  <% if can? :destroy, @post %>
    <%= link_to 'Delete', @post, method: :delete, 
        data: { confirm: 'Are you sure?' }, class: "btn-alert" %>
  <% end %>
</div>
<div class="clearfix"></div>

(2) I have tried adding this to the view

<fieldset data-type="horizontal">

(3) Have tried other fixes but my post is probably starting to get convoluted.

any help appreciated Pierre

Answer 1

h1 {
  display: inline-block;
}

Demo