title: How to align image, text and button on one line with out tables
body: <p>I'm trying to align a movie poster image, description text &amp; add to cart button on the same line. The text needs to be centered aligned and not wrap around button or image. It should look like this.</p>
  
  <p><a href="https://i.stack.imgur.com/yQaCl.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/yQaCl.png" alt="enter image description here"></a></p>
  
  <p>However, with my current code, it looks like this. Movie description text is not center-aligned and it wraps around the button.
  <a href="https://i.stack.imgur.com/V25NT.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/V25NT.png" alt="enter image description here"></a></p>
  
  <p>This is my code. How can I modify it to fix it to look like the first image?</p>
  
  <pre><code>    &lt;div class="card-block"&gt;
          &lt;div class="pull-left"&gt;&lt;img src="https://{{movie.image}}" alt="[Image Missing]" width="70px" /&gt;&lt;/div&gt;
          &lt;br&gt;&lt;span&gt;{{movie.description}}&lt;/span&gt;
          &lt;span&gt;
              &lt;button class="float-right btn btn-sm btn-success" (click)="addToCart(movie)"&gt;
                  Add to Cart
              &lt;/button&gt;&lt;/span&gt;
      &lt;/div&gt;
  </code></pre>