html - Extend a SPAN, placed after other elements, to right border of its container -

i have table 2 columns. in each 1 present simple text , sentence wrapped in span. table columns have fixed width , texts random length. "extend" span width right margin of cell table.

<table>   <tr>       <td>text 1 <span>other text 1</span></td>       <td>text 2 <span>other text 2</span></td>   </tr> </table> 

and css rules:

td {     border:solid 1px black;     padding:5px;     width:200px; }  span {     border-bottom:dotted 1px red; } 

here jsfiddle example.

as can see, dotted red border under span under text... extend until right margin of each cell, i'm looking way extend span length initial position (dependent preceding black text) right margin of container.

is possible in ways?

spans inline elements. want do, need turn block element. @ point, need use either inline-block , widths or block , floats.

you can use js however:

$(document).ready(function() {   var containerwidth = $('table td').width();   var textwidth = $('span:first-child').width();   var newwidth = containerwidth - textwidth;   $('span.second').css('width',newwidth); }); 

http://codepen.io/anon/pen/eyjfa