Can someone help me align the X on this div? I have been playing with it forever and cannot figure it out :(

Question

This is the pen

https://codepen.io/brxtn/pen/rNOJKBq

<div class="annotation">
<div class="annotext">
<div class=annobar></div>
<div class="x">✕</div>
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum."</div>
</div>

.annotation{
  height:auto;
  font-family:cardo;
  width:280px;
  text-align:justify;
  font-size:0.9em;
  padding:30px;
  transition:all 0.4s linear;
}

.annotext{
width:250px;  
  padding:0px;
}

.x{
  padding-left:3px;
  padding-top:3px;
  color:#c73626;
}


.annobar{
    display:block;
    height:1px;
    border:0;       
    border-top:1px solid #c73626;
    margin:1em 0;
    padding:0;
}

And I have been struggling to keep everything inside the "annotation" div and get this alignment of the "annobar" with the text:

Answer 1

You can position the x absolutely using the half the margin of the annobar as the top position (so -0.5rem in this case) and making the annotext position: relative (so the top-right corner is where you want the x):

.annotation{
  height:auto;
  font-family:cardo;
  width:280px;
  text-align:justify;
  font-size:0.9em;
  padding:30px;
  transition:all 0.4s linear;
}

.annotext{
  width:250px;  
  padding:0px;
  position: relative;
}

.x{
  padding-left:3px;
  padding-top:3px;
  color:#c73626;
  position: absolute;
  right: 0;
  top: -0.5rem;
}


.annobar{
    display:block;
    height:1px;
    border:0;       
    border-top:1px solid #c73626;
    margin:1em 0;
    padding:0;
    width: 90%;
}

<div class="annotation"><div class="annotext"><div class=annobar><div class="x">✕</div></div>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum."</div></div>