CSS 网格问题，图标未显示我期望的位置

Question

我正在创建一个小型测验应用程序。它显示了一个问题和几个可供选择的答案，非常标准。每个可能的答案都由 DIV 中的文本表示。当用户选择答案时，我想通过在 DIV 右侧显示一个图标来将其标记为正确/不正确。 DIV的宽度是动态的，所以我不想使用“位置”来放置它。我认为简单地将 DIV 转换为显示：网格、制作两列、让文本跨越两列并将图标放置在第二列（右对齐）中可能是有意义的，这应该将其保持在正确的位置。

https://jsfiddle.net/p5zjoxq6/1/

<div class="container">
    <div class="message">
This is a message that should span the cell and go under the icon
    </div>
    <img src="https://img.icons8.com/2266EE/search" class="icon" alt=""><!-- This icon should appear on the right and float over the text -->
</div>

.container {
  display: grid;
  grid-template-columns: 1fr 1fr;
  
  width: 425px;
  background-color: salmon;
}

.message {
    grid-column-start: 1;
    grid-column-end: span 2;
}

.icon {
  grid-column: 2;
  width: 20px;
  z-index: 10;
  justify-self: end;
}

我遇到的问题是图标显示在文本下方，并占用空间，这使得 DIV 格外高（高度）。我希望图标在文本上方右对齐，并且不占用额外的空间。我不确定我在这里做错了什么，有人可以帮助我吗？

Answer 1

希望你做得好。为什么你不尝试先移动图标并在消息中添加鲑鱼背景色？