我有一个textarea字段，我想在它的底部显示两个辅助文本。最左边的辅助文本包含一个小图标，并左对齐。右边的辅助文本是右对齐的。
一切都很好。
然而，在较小的屏幕尺寸上，出现了一些问题。
下面的示例代码显示了发生了什么，这个附件显示了我想要发生的事情。
左边的帮助文本被放置在单独的行上，图标被垂直放置在该块的中心，而不是在块的顶部。右边的帮助文本也被放置在单独的行上，但我们希望它是右对齐的。
我们想要的：

实际发生的情况：

.wrapper {
  position: relative;
}

textarea {
  width: 100%;
  height: 200px;
  resize: none;
}

.helpers {
  margin-top: 0px;
  display: flex;
  justify-content: space-between;
}

.helper-wrapper {
  display: flex;
  align-items: center;
}

img {
  width: 20px;
}

#help2 {
  text-align: center;
}

<div class="wrapper">
  <textarea id="text" name="text" placeholder="Placeholder"rows="8" col="10"></textarea>
  <div class="helpers">
    <!-- Some SVG icon I grabbed from the Internet. In practice, this is a React component that returns an SVG -->
    <div class="helper-wrapper">
        <img src="https://dev.w3.org/SVG/tools/svgweb/samples/svg-files/acid.svg" />
        <span id="help1">This is some helper text</span>
    </div>
   
    <span id="help2">More help text</span>
  </div>
  
</div>

我试过在span#help2元素中添加text-align: center，在图标上添加align-items: start，但这似乎不起作用。理想情况下，我不想计算换行符发生在哪个断点。我只想在它们发生时正确定位图标。
任何帮助将不胜感激！