CSS on webkit browsers - elements not positioned correct sometimes

CSS on webkit browsers - elements not positioned correct sometimes

I have a small website that i tested on IE,FF and it seems to work fine.
when i try it on chrome or safari some of the elements get positioned in
the wrong place - but only some of the time. this happens around 50% of
the time (5 out of 10 refreshes). these are the elements and related CSS:
<div id="ctl00_mainFormPlacHolder_incidentsList" class="incidentsList">
<a href="ManageUserTasks.aspx?IncidentID=7">
<div class="incident lightBackgroundMarginBottom completed"
runat="server" onserverclick="incidentClicked">
<div class="incidentName"> All Completed Incident </div>
<div class="incidentDateTime"> <span>8/12/2013 | 08:42</span> </div>
</div>
</a>
</div>
.incidentsList {
max-height: 820px;
overflow-y: auto;
overflow-x: hidden;
}
.incidentsList a {
text-decoration: none;
}
.incident {
width: 100%;
height: 64px;
line-height: 64px;
}
.incidentName {
height: 100%;
width: 50%;
text-align: left;
text-overflow: ellipsis;
display: inline-block;
white-space: nowrap;
overflow: hidden;
margin-left: 10px;
}
.incidentDateTime {
height: 100%;
width: 40%;
text-align: end;
float: right;
margin-right: 10px;
}
as you can see what i want to have is a line (.incident) with 100% width,
and in it on the left i should have some text (.incidentName) and on the
right side some other text (.incidentDateTime).
i have several lines, but even with a single line i get the same problem -
what happens is that sometimes the right side text (.incidentDateTime) is
displayed exactly 1 line below where it should be.
what am i doing wrong?