Using CSS, how do you anchor an element to a baseline and size it based on another "pinned" element?

Question

Here's an image of what I'm referring to:

If you have some fixed height h from the baseline that the pin lies, and the green element is dynamically sized, how can you make the orange element take the space between the two?

Answer 1

Have exactly what you need in this case using a flexbox.

The pin approximately stays at the same height above the baseline give or take 1px.

How it works: When the green element grows say 10px the pin is elevated by 5px. But the flex setup means the dummy and the orange box reduces 5px each thus keeping the pin at a contant height.

* {
  box-sizing: border-box;
}
body {
  margin: 0;
  padding: 0;
}
.wrapper {
  display: flex;
  flex-direction: column;
  align-items: center;
  height: 100px;
  border-bottom: 1px solid black;
}
.dummy {
  flex: 1;
}
.top {
  height: 20px;
  width: 20px;
  border: 1px solid green;
  position: relative;
}
.top div {
  position: absolute;
  height: 3px;
  width: 3px;
  background: #880015;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
}
.bottom {
  width: 50px;
  border: 1px solid orange;
  flex: 1;
}

<div class="wrapper">
  <div class="dummy"></div>
  <div class="top">
    <div></div>
  </div>
  <div class="bottom"></div>
</div>