I have a question on organizing this HTML code:
<ol class="results-list">
<% @results.sort_by { rand }.each do |result| %>
<li class="<%= 'checked-out' if result.catalog_item.library_status == 'Checked out' %>">
<div class="search-result">
<%= link_to 'View', mobile_library_submission_checkout_path(result, search_term: params[:q], theme_id: @search_theme ? @search_theme.id : nil), method: :get, class: 'btn red view' %>
<p class="title"><%= result.title %></p>
<span class="meta">
<p class="display-name"><%= result.display_name %></p>
<% if result.theme %>
<p><%= result.theme.name %></p>
<% end %>
<p><%= result.location_string %></p>
<p class="tag-list"><%= result.tag_list.join(" / ") %></p>
</span>
</div>
</li>
<% end %>
</ol>
My issue is with aligning the link_to button and the p tag containing result.title. I've attempted to use inline display but haven't been successful. How can I achieve this?
.results-list {
display: block;
font-family: $reckless-medium;
max-width: 400px;
margin: 1em auto 0;
counter-reset: item;
list-style: none;
.checked-out {
color: $light-text;
a {
color: $light-text;
.title { color: $light-text; }
}
.icon-caret-right-grey { background: none; }
}
.search-result {
width: 40%;
.view {
display: inline-block;
padding: 2% 14% 2% 14%;
margin-left: 1%;
margin-right: 2%;
color: $white;
}
a.view {
display: inline-block
}
p.title {
display: inline-block
}
}
The current layout is shown in these images:
https://i.sstatic.net/8SotC.png
and
https://i.sstatic.net/VRics.png
However, my goal is to position the view button next to the title text on the right side. There should be sufficient space for the view button on the right side of the title. How can I achieve this layout?