Is it possible to absolutely position an element based on the bottom right corner of the element being positioned?

Question

When using absolute positioning, the position is calculated from the top left corner of the element being positioned.

Is it possible to position from the bottom right corner instead?

In the example JS Fiddle below, I would like to make the bottom right corner of #position-me touch the top left corner of #wrapper, so it looks like this (roughly - I didn't spend time aligning exactly). The width and height of #position-me are variable depending on the content - if it was a fixed width/height it would be easy :)

#wrapper {
  position: absolute;
  bottom:0;
  right:0;
  width: 100px;
  height: 100px;
  background-color: red;
}

#position-me {
  position: absolute;
  width: auto;
  height: auto;
  background: green;
}

<div id='wrapper'>
<div id='position-me'>
Text is here
</div>
</div>

https://jsfiddle.net/pfa89bu1/

#wrapper is absolutely positioned and #position-me is nested inside #wrapper. These things I really don't want to change if I can help it.

I know that I can solve this with JS, but I'm wondering if there is a pure CSS solution.

Answer 1

A simple tranform can do it. You may also add top:0;left:0 but it's not needed in this case:

#wrapper {
  position: absolute;
  bottom: 0;
  right: 0;
  width: 100px;
  height: 100px;
  background-color: red;
}

#position-me {
  position: absolute;
  transform: translate(-100%, -100%); /* this */
  background: green;
}

<div id='wrapper'>
  <div id='position-me'>
    Text is here
  </div>
</div>