将文本垂直对齐到另一个文本旁边的顶部

Question

I am having a div with various texts. I need to make the am and pm on the top.

My HTML code is-

<div class="agendaBlackDiv">
  <span class="agendaTimeStop">10:00</span >
  <span>a.m.</span>
  <text>-</text>
  <span class="agendaTimeStop">11:30</span>
  <span>p.m.</span>
</div>

Here is JSfiddle link- Fiddle Link

Answer 1

== Hi now define your .text class two property as like this

.text {
    display: inline-block;
    vertical-align: top;
}

Demo

Answer 2

Just change your css class from

text
{
    color:white;
}

to

text
{
    color:white;
    vertical-align: top;
}