I'm having trouble aligning a close button I created in CSS with regular text. Although the containing span element seems to align with the adjacent text, it doesn't align properly with the child divs.
<a class="event-filter button" href="#">Filter name
<span class="close-button">
<div class="menu-bar menu-bar-top"></div>
<div class="menu-bar menu-bar-bottom"></div>
</span>
</a>
.close-button {
display: inline-block;
position: relative;
width: 1em;
height: 1em;
z-index: 15;
top: 0;
left: 0;
padding: 0;
}
.close-button:hover {
cursor: pointer;
}
.close-button .menu-bar {
position: absolute;
border-radius: 2px;
width: 100%;
border: 1px solid grey;
}
.close-button .menu-bar-top {
border-bottom: none;
top: 0;
transform: rotate(45deg) translate(8px, 8px);
}
.close-button .menu-bar-bottom {
border-top: none;
top: 22px;
transform: rotate(-45deg) translate(7px, -7px);
}