How can I dynamically expand the width of a div to fit a really long word?

Question

I am trying to replicate the functionality of a basic HTML table with divs, css, and jQuery. The main requirement is to allow each row to start at the same location, regardless of where the other columns in the row end. They all need to start together.

I am using the code in this fiddle, and so far it is working great.

The problem is that due to the nature of my application, the width of my columns need to shrink to fit more columns. Many of these columns contain text from other languages, making it possible that the word is wider than the column width that I assign the column (I do this by dividing the width of the view (100%) by the number of columns).

The fiddle shows an example of this problem, a long word going wider than the column. While preserving all of the other functionality I have built up so far, is it possible to make it so that the div's width is at least X, but in the event that there is a really wide word, it expands and becomes as wide as that word?

It is perfectly fine if the content grows wider than the view width, meaning that if it had to grow to be 120% or whatever, scrolling to the side is no problem.
EDIT: Updated fiddle link

Answer 1

The only way I've found to do this is to use a bit of a hack.

1. Create a temporary div

   //place in new element
   $("body").append("<div id='testParent'></div>");

2. Add each word into the temp div as a span

   var words = $(this).html().split(" ");
   for(var i = 0; i < words.length; i++)
   {
        $("#testParent").append("<span>"+words[i]+"</span>");
   }

3. Set the CSS:

div#testParent
{
    display: inline-block;
    width: auto;
}

div#testParent span{
    display:block;
}

4. Get the temp div's width and set the parent div's width accordingly

   var width = $("#testParent").width();
   $("#testParent").remove();

   if(width > $(this).width())
       $(this).parent(".td-outer").width(width);

I applied the above code to the first element in your fiddle:

JSFiddle