Different height for the <li> - html

Question

Goal:
Make the text "bbb" to have the same font height as "aaa" but the height of the li.ttt should have the same height as the font-size: xx-large;
Problem:
Don't know how to do it. I tried using "height" but it doesn't work.
https://jsfiddle.net/qc89dwz7/
LI.filtered A {
position: relative;
padding: 1px 20px 1px 4px;
background: #F0F0FF url(https://cdn3.iconfinder.com/data/icons/luchesa-vol-9/128/Lollipop-16.png) no-repeat scroll right 0;
background-position: right bottom;
font-weight: 400;
color: #08C;
text-decoration: none;
}
LI.filtered .testt {
background: #F0F0FF;
padding: 1px 4px 1px 4px;
font-weight: 400;
color: #08C;
text-decoration: none;
}
#result-filters {
margin: 0, 0, -30px;
}
#result-filters UL {
display: inline;
list-style: outside none none;
margin: 0;
padding: 0;
font-size: 12px;
font-family: arial, helvetica, sans-serif;
}
LI.filtered,
#result-filters LI.filtered {
padding-left: 0;
background: transparent none repeat scroll 0 0;
}
#result-filters UL LI {
margin: 0 8px 0 0;
float: left;
}
LI.ttt A {
position: relative;
padding: 1px 4px 1px 20px;
background: #F0F0FF url(https://cdn3.iconfinder.com/data/icons/luchesa-vol-9/128/Lollipop-16.png) no-repeat scroll left 0;
background-position: left;
font-weight: 400;
color: #08C;
text-decoration: none;
font-size: xx-large;
-webkit-border-radius: 4px;
-moz-border-radius: 4px;
border-radius: 4px;
background-color: #F4F4F4;
min-height: 61px;
border: 0;
line-height: 1.2;
letter-spacing: 1px;
width: 137px;
text-align: center;
font-family: Tahoma;
}
<div id="result-filters">
<ul>
<li class="filtered">
<a href="">
aaa
</a>
</li>
<li class="ttt">
bbb
</li>
</ul>
</div>

Answer 1

xx-large translates to 32px
Knowing this, you can establish the height and line-height of the two list-items separately:
li.filtered {
height: 12px;
line-height: 12px;
}
li.ttt {
height: 32px;
line-height: 32px;
}
You can then establish the font-size of aaa and bbb as 12px:
li.filtered a,
li.ttt a {
font-size: 12px;
}
Putting it all together:
LI.filtered A {
position: relative;
padding: 1px 20px 1px 4px;
background: #F0F0FF url(https://cdn3.iconfinder.com/data/icons/luchesa-vol-9/128/Lollipop-16.png) no-repeat scroll right 0;
background-position: right bottom;
font-weight: 400;
color: #08C;
text-decoration: none;
}
LI.filtered .testt {
background: #F0F0FF;
padding: 1px 4px 1px 4px;
font-weight: 400;
color: #08C;
text-decoration: none;
}
#result-filters {
margin: 0, 0, -30px;
}
#result-filters UL {
display: inline;
list-style: outside none none;
margin: 0;
padding: 0;
font-size: 12px;
font-family: arial, helvetica, sans-serif;
}
LI.filtered,
#result-filters LI.filtered {
padding-left: 0;
background: transparent none repeat scroll 0 0;
}
#result-filters UL LI {
margin: 0 8px 0 0;
float: left;
}
LI.ttt A {
position: relative;
padding: 1px 4px 1px 20px;
background: #F0F0FF url(https://cdn3.iconfinder.com/data/icons/luchesa-vol-9/128/Lollipop-16.png) no-repeat scroll left 0;
background-position: left;
font-weight: 400;
color: #08C;
text-decoration: none;
font-size: xx-large;
-webkit-border-radius: 4px;
-moz-border-radius: 4px;
border-radius: 4px;
background-color: #F4F4F4;
min-height: 61px;
border: 0;
line-height: 1.2;
letter-spacing: 1px;
width: 137px;
text-align: center;
font-family: Tahoma;
}
li.filtered,
li.ttt {
display:block;
background-color: rgba(244,244,244,1);
}
li.filtered {
height: 12px;
line-height: 12px;
margin: 10px;
}
#result-filters li.filtered {
margin-top: 10px;
}
li.ttt {
height: 32px;
line-height: 32px;
}
li.filtered a,
li.ttt a {
font-size: 12px;
}
<div id="result-filters">
<ul>
<li class="filtered">
<a href="">
aaa
</a>
</li>
<li class="ttt">
bbb
</li>
</ul>
</div>
=====
A Simpler Alternative for Plain Colour Backgrounds
If you wish to middle-align the two same-font-size list-items over a plain colour background, simply colour in the background of li.ttt and leave the background of li.filtered transparent:
li.filtered,
li.ttt {
display:block;
height: 32px;
line-height: 32px;
}
li.ttt {
background-color: rgba(244,244,244,1);
}
li.filtered a,
li.ttt a {
font-size: 12px;
}
Putting it all together (simpler version):
LI.filtered A {
position: relative;
padding: 1px 20px 1px 4px;
background: #F0F0FF url(https://cdn3.iconfinder.com/data/icons/luchesa-vol-9/128/Lollipop-16.png) no-repeat scroll right 0;
background-position: right bottom;
font-weight: 400;
color: #08C;
text-decoration: none;
}
LI.filtered .testt {
background: #F0F0FF;
padding: 1px 4px 1px 4px;
font-weight: 400;
color: #08C;
text-decoration: none;
}
#result-filters {
margin: 0, 0, -30px;
}
#result-filters UL {
display: inline;
list-style: outside none none;
margin: 0;
padding: 0;
font-size: 12px;
font-family: arial, helvetica, sans-serif;
}
LI.filtered,
#result-filters LI.filtered {
padding-left: 0;
background: transparent none repeat scroll 0 0;
}
#result-filters UL LI {
margin: 0 8px 0 0;
float: left;
}
LI.ttt A {
position: relative;
padding: 1px 4px 1px 20px;
background: #F0F0FF url(https://cdn3.iconfinder.com/data/icons/luchesa-vol-9/128/Lollipop-16.png) no-repeat scroll left 0;
background-position: left;
font-weight: 400;
color: #08C;
text-decoration: none;
font-size: xx-large;
-webkit-border-radius: 4px;
-moz-border-radius: 4px;
border-radius: 4px;
background-color: #F4F4F4;
min-height: 61px;
border: 0;
line-height: 1.2;
letter-spacing: 1px;
width: 137px;
text-align: center;
font-family: Tahoma;
}
li.filtered,
li.ttt {
display:block;
height: 32px;
line-height: 32px;
}
li.ttt {
background-color: rgba(244,244,244,1);
}
li.filtered a,
li.ttt a {
font-size: 12px;
}
<div id="result-filters">
<ul>
<li class="filtered">
<a href="">
aaa
</a>
</li>
<li class="ttt">
bbb
</li>
</ul>
</div>