Position a child div with it's right side aligned with the parent's left

June 3, 2022

I want to pop up a "help text box" to the right of an existing element.

I can’t see how I can position it so that the help text box’s right hand side aligns with the parent’s left hand side.

.thingy {
  border-width: 2px;
  border-color: grey;
  border-style: solid;
  margin-left: 50vw;
  position: relative;
  width: fit-content;
}

.thingy-help {
  color: red;
  z-index: 10;
  text-align: right;
  position: absolute;
  top: 0.5rem;
  right: 5rem; /* how to set this to be parent width? */
  border-width: 2px;
  border-color: grey;
  border-style: solid;
  border-radius: 5px;
}

<div class="root">
  <div class="thingy">
    <div class="thingy-help">
      This is a thingy, how about that?
    </div>
    A thingy
  </div>
</div>

>Solution :

You could use transform: translate(-100%) to translate it to the left by 100% of its parent, and use transform-origin: top right to set the origin to the top right point of the .thingy-help.

.thingy {
  border-width: 2px;
  border-color: grey;
  border-style: solid;
  margin-left: 50vw;
  position: relative;
  width: fit-content;
}

.thingy-help {
  color: red;
  z-index: 10;
  text-align: right;
  position: absolute;
  /* how to set this to be parent width? */
  transform-origin: top right;
  transform: translate(-100%);
  
  border-width: 2px;
  border-color: grey;
  border-style: solid;
  border-radius: 5px;
}

<div class="root">
  <div class="thingy">
    <div class="thingy-help">
      This is a thingy, how about that?
    </div>
    A very long thingy
  </div>
</div>