CSS reset does not allow a different vertical align - css

Question

I used a css reset where * selector has
vertical-align:baseline;
Entire theme was build with it, and now, at the very end, I need one div to align top. And it does not. I did specify it in styling, added !important. No luck. I'm sure I'm missing something, but can't figure out what.
So
Css reset * selector part looks like this
* {
vertical-align: baseline;
font-weight: inherit;
font-family: inherit;
font-style: inherit;
font-size: 100%;
border: 0 none;
outline: 0;
padding: 0;
margin: 0;
}
Html part
php part of wordpress templates
<li>
<div id="datencomments">
<div id="date3">
<div id="datetxt">
<div class="month"><?php the_time('M ') ?></div>
<div class="day"><?php the_time('j ') ?></div>
</div></div>
<div id="comments"><span class="comments-link"><?php comments_popup_link( __( '1 Comment', 'blankslate' ), __( '% Comments', 'blankslate' ) ); ?></span></div>
</div>
</li>
</ul>
</div>
css for it.
.postpreview ul {
list-style: none;
}
.postpreview ul li {
display: inline-block;
}
#datencomments {
width: 100px;
vertical-align: top !important;
}
#date3 {
width:100px;
height: 100px;
border: 2px solid transparent;
border-radius: 100px;
background-color: #17B1BE;
color: #fff;
text-align: center;
}
.month {
text-align: center;
margin-top: 12px;
text-transform: uppercase;
font-size: 24px;
font-weight: 200;
font-family: 'Exo 2', sans-serif;
}
.day {
text-align: center;
margin-top: -8px;
text-transform: uppercase;
font-size: 40px;
font-family: 'Exo 2', sans-serif;
}
#comments {
margin-top: 20px;
text-align: center;
font-size: 12px;
font-family: 'Droid Serif', serif;
font-style: italic;
text-decoration: underline;
}
the rest is transitions, hover colors etc...
I need #datencomments at the top of the template, while * is pulling it down.

Answer 1

If done like this, display:block puts the text behind the box, display:inline puts it inside on top and display:inline-block puts the text where it is specified with vertical-align.
<div id='container'>
<div id='text'>This is a test</div>
</div>
#container{
height: 200px;border: 5px solid blue;text-align:center;
}
#text,#container:before{
vertical-align: middle;
display: inline-block;
}
#container:before{
content: "";
height: 100%;
}