Using CSS, how do you anchor an element to a baseline and size it based on another "pinned" element?
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>