如何修复同一行中两个块的文本缩进

Question

我偶然发现了缩进的问题。如果您查看我网站的这一部分：

我显示了两张图片，并将它们与“作者”，“标题”和“虚拟描述”对齐。

这是我的HTML标记：

<img class="book-covers" src="../images/BookCovers/books.jpg" alt="Book">        
            <span>
            </span>
            <p class="text-book">
                <br>
                <br>
                Author<br>
                Titel<br>
                Dummy description
            </p>

            <img class="book-covers" src="../images/BookCovers/HowToReadABOOK.jpg" alt="Book">        
            <span>
            </span>
            <p class="text-book">
                author<br>
                Titel<br>
                Dummy description
            </p>

这是我的CSS代码：

.text-book
{
  display: inline-block;
  margin: 50px 15px;
  font-size: 90%;
  width: 450px;
}

.book-covers
{
  height: 300px;
  width: 200px;
  vertical-align: top;
  margin-top: 50px;
  margin-left: 12%;
}

您可以在我的HTML代码中看到，我在遇到的第一个<br> <br>下插入了<p class="text-book">。

我的问题是：由于某种原因，我在如何阅读一本书的第二张图像旁边对齐的文本也出现了换行符。

谁能告诉我我在做什么错以及如何解决这个问题？