HTML CSS issue in a table layout with middle elements

HTML CSS issue in a table layout with middle elements

I have a fiddle to illustrate my problem - I am trying to create a simple
HTML format - in which there is some text on top "Top Row Text", some text
on middle "Number" (but not on center). Till this point everything is
fine. But now I want to add some text ("lonnnnnnnnnnnnnnnnng
descriptiiiiiiiiiiiiiiion") right below "Number". This description will be
of same font size as top row i.e. 24 and if needed it should be able to
take the space available in bottom row also. The problems is as soon as I
add a span or para below this text, it changes the css of the parent too
and Number doesn't remain on middle anymore!
ps: I had to create this table kind of format to achieve certain aspects
(Number on middle of table and starting from 20% width etc), therefore I
would appreciate if someone could guide me an extension to the css of this
format only.
Thanks a lot
fiddle link
<div id="opentickets" class="container">
<table class="outer wordwrap">
<col class="cola" />
<col class="colb" />
<tr class="top">
<td colSpan="2" class="heading">Top Row Text</td>
</tr>
<tr class="middle">
<td ></td>
<td class="wordwrap">
<div class="content"><b class="number">Number</b>
</div>
</td>
</tr>
<tr class="bottom">
<td ></td>
<td class="wordwrap"> </td>
</tr>
</table>
</div>