Why doesn't the title and date line up? - css

Question

Here is a snippet from some generated html I am trying to style. Why does the date align to the top but the link inside the h3 doesn't?
Using dev tools I can see the link is centrally aligned to the h3 vertically but I cant alter it in any way I have tried with vertical-align or by adjusting height.
article {
width: 400px;
}
article .date_posted {
float: right;
font-size: 12px;
}
article div.thumbnail {
margin-right: 10px;
width: 100px;
height: 75px;
float: left;
box-shadow: 0 0 0 4px #fff, 0 0 0 5px red;
vertical-align: text-top;
}
article div.title h3 {
display: inline;
}
article div.title h3 a {
font-size: 14px;
font-family: Lato, sans-serif;
font-weight: 900;
color: red;
}
article:after {
visibility: hidden;
display: block;
font-size: 0;
content: " ";
clear: both;
height: 0;
}
<article>
<div class="uposts-part thumbnail" data-resize="1">
<img width="288" height="230" src="http://site3.wpmu-subdomain.dev/wp-content/uploads/sites/3/2015/10/0f02bd48-7efe-3934-8f4b-093c81560333.jpg" class="attachment-post-thumbnail wp-post-image" alt="" style="margin-top: -2.5px; height: auto; width: 100%;">
</div>
<div class="uposts-part date_posted">
<span class="date">23</span>, <span class="time">October</span></div>
<div class="uposts-part title">
<h3>Dignissimos deserunt fugiat at sdfsfsd sdfsd s fsdf s ds fds df sdf sdf sd f sd fsd d</h3>
</div>
</article>
JS fiddle: https://jsfiddle.net/xdfc8vnm/

Answer 1

article div.title {
float: left;
width: 233px;
line-height: 1
}
article div .title h3 {
display: inline;
margin: 0;
}
article div.title h3 a {
font-size: 14px;
font-family: Lato, sans-serif;
font-weight: 900;
color: red;
display: block;
}
article .date_posted {
float: right;
font-size: 12px;
line-height: 1;
}

Answer 2

For your class: article .date_posted you need to set same Font Family, Font Size and Font Weight that you used on post title. So it should go like this:
article .date_posted {
float: right;
font-size: 14px; /* from 12px changed to 14px */
text-decoration: underline; /* this line added */
font-family: Lato, sans-serif; /* this line added */
font-weight: 900; /* this line added */
}
Here is an example: https://jsfiddle.net/LddvoLaL/2/