How to make two inline-box links/buttons share the same height? (html and css)-CodePudding

I'm trying to make the two buttons #left and #right the same height. So they scale with the link box that has the most text. I'm using IDs instead of classes just to make sure any class styling gets overwritten.

Link to jsfiddle.

I have searched online and most of the answers to the question of this nature required a flex-box... (and they weren't dealing with buttons/links) I think that wouldn't work since it would mess with the display:inline-block;... I have tried it though, it didn't work. Though to be honest I don't know what I'm doing. :)

I haven't tried removing display:inline-block; and using flexbox and experimenting with it. But as I said I'm not very good at this so I wouldn't know what to do either way and would probably spend another 2 hours in vain.

Would be happy if someone pointed me towards an answer or just solved it for me. :P

Thank you! :D

Edit: I have tried using display:inline-flex; just now. It lets me change the height but I am not able to make it look right.

CodePudding user response：

In a pretty 'hack' sort of way, you can achieve it like this.

/* .side_button{    This commented code can be deleted.
    position: absolute;
    display: inline-block;
} */
.category_button{
  display: flex;
}
.side_button a {
  display: flex;
  align-items: center;
  height: calc(100% - 36px);
}

This uses flexbox to handle the layout.

What this does is for the a inside the side_button div, adjust its height to be 100% of the parent, but subtract the padding and margins from that height.

align-items: center just centers the text vertically in the div.

Hope this helps.