having sub status below main status

having sub status below main status

I'm probably over thinking this and overlooking the simple solution, but I
just can't think of that simple solution.
I have an inline list of generalized 'status' like this
<span><b>Department:</b> No Task Started</span>
<span><b>Department:</b> No Task Started</span>
<span><b>Department:</b> No Task Started</span>
<span><b>Department:</b> No Task Started</span>
and I need to place almost like a 'sub status' below each one without
force positioning them or placing them in a table. So they would be laying
underneath each span with the generalized task.
I've tried to place them in individual ul and then displaying them inline,
but they did not display correctly. I also tried to place them in separate
p tags and see if that would work, but I failed miserably.
my js fiddle http://jsfiddle.net/kZFAG/1/
Any help would be wonderful!