How to align box at half bottom and half out of container

Question

I am solving a challenge and i am unable to fix a box at bottom header where half box will be inside header and the other half will be out of header with fully responsive. I tried it do with positions and bottom but when i change responsiveness more than half portion of box goes inside header or sometime more than half portion goes outside of header. i want that box size always fix at half inside bottom.

i want to align box like this:

Answer 1

1. Use position: relative on the parent element
2. Apply position: absolute to the child element
3. Place the child element below the parent element by using top: 100%
4. offset the child element to 50% of its own height to the top by using transform: translateY(-50%)

.parent {
  position: relative;
}

.child {
  position: absolute;
  top: 100%;
  transform: translateY(-50%)
}




/* for visualization purpose only */
.parent {
  border: 2px dashed red;
  min-height: 30vh;
}

.child {
  border: 2px solid blue;
  min-height: 15vh;
  width: 40vw;
}

div {
  display: flex;
  justify-content: center;
  align-items: center;
}

<div class="parent">
  Parent
  <div class=child>Child</div>
</div>