Okay, I'm a newbie to CSS3, so please be gentle. ;-)

I'm working with some Wordpress code (Woocommerce plugin, to be exact), and I'm trying to format a line of code in a sidebar so that 2 separate text items (one in an <a>, the other in a <span> are all on the same line, the full width of the column, and with a bottom border.

It looks something like this (except the bottom border on each text do not go all the way across the enclosing sidebar box):

http://www.dalluva.com/temp/browse-catalog.JPG (sorry, I'm new and can't post inline images yet)

Here's the code fragment I'm trying to live with (i.e. I don't want to change it):

<div class="widget">
  ...
  <ul class="product-categories">
    <li class="cat-item">
      <a href="http://localhost/dalluva/shop/product-category/books/">Books</a>
      <span class="count">(5)</span>
    </li>
    ...

And here's the CSS I have now:

.widget ul li a {
   border-bottom: 1px solid #e9e9e9;
    line-height:1.0;
    padding: 5px 0 5px 22px;
    display: inline-block;
 }

.widget ul li span {
   border-bottom: 1px solid #e9e9e9;
   line-height: 1.0;
   padding: 5px 0 5px 0;
   display: inline-block;
 }

The output in the image above looks right for this CSS code, but when I change the 'span' CSS to include a width:100%, it causes the span element to wrap to the next line, looking like this:

http://www.dalluva.com/temp/browse-catalog-2.JPG

I've played with white-space:nowrap, overflow:hidden, etc, but I can't seem to find a way to have both the <a> and the <span> text on the same line with the border extending the full width of the column.

Any suggestions on getting the desired effect through CSS only?

Thanks. Michael