JSFiddle - React, Tailwind, and code Playground

HTML

<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>

CSS

.container {
  display: grid;
  grid-template-columns: 1fr 1fr;
  
  width: 430px;
  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;
}