JSFiddle - React, Tailwind, and code Playground

HTML

<div id="messages">
  <p class="status">Some error messages for the users of my website...</p>
  <img id="close">gggg
</div>

CSS

<style>
*{margin:0;padding:0;}

.messages {
  padding: 5px;
}
      
.status {
  border: 1px solid #ec0000;
  background: #ffabab;
 height:30px;
  margin-top:20px;
}
      
img#close {
  cursor: pointer;
  position:relative;
  top:-50px;
  height:20px;
  /* Move it up the exact amount of px of the height of the <p> AND the margin*/
}
</style>