使用伪元素时，如何使文本的第二行与第一行对齐？

如何解决使用伪元素时，如何使文本的第二行与第一行对齐？

我有一些带有文字的按钮，这些按钮在单击时会下拉文本。这些按钮在文本之前有一个伪元素。在桌面视图上看起来不错，但是当我在移动设备上查看时，文本会自动缩小为两行，第二行位于伪元素下。我希望使第二行与第一行的开头对齐。这是发生的情况的图片：

.accordion:before {
    content: url(../images/new-star.png);
    font-size: 15px;
    margin: 0 10px 15px 5px;
    vertical-align: middle;
    font-size: 30px;
    display: inline-block;
    height: 35px;
}

<button class="accordion"><span class="button-text">Click here to see more info on this topic</span></button>
        <div class="panel">
            <p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Dicta,incidunt unde. Placeat aspernatur impedit deleniti atque minima commodi,fuga quasi id voluptatum ipsum sit modi doloremque tempore debitis molestias asperiores! Alias quibusdam voluptatem porro recusandae fugiat ut atque reprehenderit in ipsa natus,dolorum,repellendus quo! Corporis deleniti aliquid cumque esse.
            </p>
        </div>

解决方法

您可以使按钮灵活：

.accordion {
  display: flex;
  align-items:center;  /* optional - horizontally centres the text or icon */
}

.accordion:before {
  content: url(../images/new-star.png);
  font-size: 15px;
  margin: 0 10px 15px 5px;
  vertical-align: middle;
  font-size: 30px;
  display: inline-block;
  height: 35px;
}

.button-text {
  flex-grow: 1; /* make text fill rest of space,don't really need this */
  text-align: left;
}

<button class="accordion"><span class="button-text">Click here to see more info on this topic</span></button>
<div class="panel">
  <p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Dicta,incidunt unde. Placeat aspernatur impedit deleniti atque minima commodi,fuga quasi id voluptatum ipsum sit modi doloremque tempore debitis molestias asperiores! Alias quibusdam voluptatem
    porro recusandae fugiat ut atque reprehenderit in ipsa natus,dolorum,repellendus quo! Corporis deleniti aliquid cumque esse.
  </p>
</div>