title: HTML - how to place text under another line of text when using display: inline or do it another way
body: <p>I want to place the price of books underneath their own titles rather than placing underneath their images.</p>
  
  <p><strong>Current Appearance:</strong>
  <a href="https://i.stack.imgur.com/xRUdM.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/xRUdM.png" alt="enter image description here"></a></p>
  
  <p><strong>search.html:</strong></p>
  
  <p><div class="snippet" data-lang="js" data-hide="false" data-console="true" data-babel="false">
  <div class="snippet-code">
  <pre class="snippet-code-css lang-css prettyprint-override"><code>.resultContainer {
    width: 100%;
    position: relative;
    left: 0;
    margin-top: 30px;
    margin-bottom: 20px;
    padding: 10px;
    border-bottom: black solid 1px;
  }
  
  .bookImage,
  .bookTitle {
    margin-left: 20px;
  }</code></pre>
  <pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;div class="resultContainer"&gt;
    &lt;div style="display: inline;"&gt;
      &lt;img class="bookImage" src=" https://marketplace.canva.com/MAB___U-clw/1/0/thumbnail_large/canva-yellow-lemon-children-book-cover-MAB___U-clw.jpg" alt="  book.title " width="120" height="160"&gt;
      &lt;span class="bookTitle"&gt;
                  Title Here&lt;br/&gt;
                  &lt;span class="bookPrice"&gt;
                      Price Here
                  &lt;/span&gt;
      &lt;/span&gt;
    &lt;/div&gt;
    &lt;div class="bookTitle"&gt;&lt;/div&gt;
  &lt;/div&gt;</code></pre>
  </div>
  </div>
  </p>