Equal heights and baseline are not a problem. However, if I'd like a hover effect on the element that displays the text with a differing font size, it is shifted out of alignment. I'm willing to use Javascript or any other solution, but am having trouble finding a way to fix the element that has the hover effect so that it doesn't get shifted out of alignment when the baseline is applied.
Simple Example:
.wrapper {
height: 50px;
display: flex;
align-items: baseline;
}
.column {
height: 100%;
display: flex;
align-items: center;
}
.span1, .span2 {
height: 100%;
display: inline-flex;
align-items: flex-end;
}
.span1:hover, .span2:hover {
background-color: gray;
}
.span1 {
justify-content: flex-start;
margin-right: 4px;
font-size: 32px;
}
.span2 {
justify-content: flex-end;
margin-left: 4px;
font-size: 8px;
}
<div class="wrapper">
<div class="column">
<span class="span1">Some content</span>
</div>
<div class="column">
<span class="span2">Some content</span>
</div
</div>
You can simulate your hover effect using a big pseudo element that will cover all the area creating the illusion of equal columns:
.wrapper {
display: flex;
align-items: baseline;
overflow:hidden;
}
.column {
display: flex;
align-items: center;
}
.column > span {
position:relative;
z-index:0;
}
.span1:hover::before,
.span2:hover::before {
content:"";
position:absolute;
z-index:-1;
top:-200px;
bottom:-200px;
left:0;
right:0;
background-color: gray;
}
.span1 {
margin-right: 4px;
font-size: 32px;
}
.span2 {
margin-left: 4px;
font-size: 8px;
}
<div class="wrapper">
<div class="column">
<span class="span1">Some content</span>
</div>
<div class="column">
<span class="span2">Some content</span>
</div>
</div>
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With