CSS/SASS Use Siblings Height

Question

Is there a way in SASS to get an element to inherit its siblings height so they line up on a horizontal line?

<div class="first">A bunch of content in here<div>
<div class="sibling"><div>

.first {
    height: auto;
    + second { 
       height: use .first height;
    }
}

No, that is not possible this way. But “equal height columns” might be one of the most discussed CSS-related subjects ever … so please do some research to find possible solutions. — CBroe, Mar 12 '15 at 22:19

score 1 · Accepted Answer · answered Mar 12 '15 at 22:22

Nope. Think about the way SASS works - your height: auto will be compiled into CSS as just that height: auto. There's no way for Sass to know what number that will turn out to be, so it can't assign a specific value to your second element. (It can only assign height: auto again, which may or may not be the value you want).

score 0 · Answer 2 · edited May 23 '17 at 12:07

You can't make them the same height, but you can ensure that they all align within the row, which might accomplish the look you are going for (hard to be sure without knowing exactly what you are trying to do):

.aligned-row {
    display:flex;
    align-items:center;
}

This is newer CSS, so not completely backwards compatible:

More info on the display:flex can be found here: vertical-align with Bootstrap 3

CSS/SASS Use Siblings Height

2 Answers2