How to fix text-alignment

I'm currently working on a book management system. I want the description-text to be displayed entirely on the right of the cover-image but only one line is displayed to the right of the image and the rest continues under the image. I don't see what I'm doing wrong.

Ruby-on-Rails Code

<!doctype html>
<html class="no-js" lang="de">
  <head>
    <meta charset="utf-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>TEA</title>
    <link rel="stylesheet" href="https://dhbhdrzi4tiry.cloudfront.net/cdn/sites/foundation.min.css">
  </head>

  <body>
    <div class="row">
      <div class="medium-6 columns">
      </div>
      <script src="https://code.jquery.com/jquery-2.1.4.min.js"></script>
      <script src="https://dhbhdrzi4tiry.cloudfront.net/cdn/sites/foundation.js"></script>
      <script>
        $(document).foundation();
      </script>
  </body>
</html>
<% @titles.each do |title| %>
  <div class="title-card padly">
    <%= link_to title, class: "cover" do %>
    <%= image_tag title.cover_url %>
    <% end %>
    <%=title.description%>
    <div class="title-info ell glassy-bg padmy padlx">
      <div class="title">
        <h6><%= title.title %> <span>(<%= title.publisher %>)</span></h6>
      </div>
      <%= title.publisher %>, <%= title.publisher_location %>
      <p class="left price label title-label radius"> Verfügbar: <%= title.available %>/<%= title.total %></p>
    </div>
  </div>
<% end %>

Generated HTML

<div class="title-card padly">
  <a class="cover" href="/titles/4">
    <img src="https://tse2.mm.bing.net/th?id=OIP.ilYLV5PpOl26myue6J2l4wHaFO&amp;pid=Api" />
  </a> Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et
  dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita
  kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet, consetetur
  sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua.
  At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem
  ipsum dolor sit amet.
  <div class="title-info ell glassy-bg padmy padlx">
    <div class="title">
      <h6>Test-Titel-2 <span>(Test)</span></h6>
    </div>
    Test,
    <p class="left price label title-label radius"> Verfügbar: 30/50</p>
  </div>
</div>

Screenshot

Solution

So you can do a couple things to get these items inline. What I'd recommend is:

1) Wrapping your text in a <p> tag so it has some text styles inherited and the html is more semantic.

2) Adding a wrapper around the link/image and the text itself, this will allow you to style the paragraph text and the image.

Check out this codepen for a little more context. https://codepen.io/ChaseAllbee/pen/ZEzOQJp?editors=1100

Hope that helps!