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>

Answer 2

You can use table properties for this. Table cells fill its parent width. If one cell is short, the other one will expand to fill its parent. The trick here is to rotate 90º your "table" and it's done. To change the 'height" of your pinned item you will actually be changing its width. The anchor element will resize accordingly.

Be aware of this though: http://caniuse.com/#search=transform

.baseline{
  height: 100px;
  width: 100px;
  border: 3px solid black;
  display: table;
  transform: rotate(90deg);
  }

.pinned,.anchored{
  display: table-cell;
  }

.pinned{
  width: 30px;
  border: 3px solid green;
  }

.anchored{
  border: 3px solid orange;
  }

<div class="baseline">
  <div class="pinned">
    </div>
  <div class="anchored">
    </div>
</div>