table text should be placed over progress image

[chenyujie]

Abstract horizon table code as following:

            if ($new_row.hasClass('warning')) {
              var $container = $(document.createElement('div'))
                .addClass('progress-text horizon-loading-bar');

              var $progress = $(document.createElement('div'))
                .addClass('progress progress-striped active')
                .appendTo($container);

              $(document.createElement('div'))
                .addClass('progress-bar')
                .appendTo($progress);

              // if action/confirm is required, show progress-bar with "?"
              // icon to indicate user action is required
              if ($new_row.find('.btn-action-required').length > 0) {
                $(document.createElement('span'))
                  .addClass('fa fa-question-circle progress-bar-text')
                  .appendTo($container);
              }
              $new_row.find("td.warning:last").prepend($container);
            }

When progress bar being displayed, an image would be placed before the table text. The result is a long process bar displaying before a short text, and column become two line. The visual effect is poor. How ever, if we change 'prepend' to 'wrapInner', the text would be placed over the progress bar, and the column keep single line.

              $new_row.find("td.warning:last").prepend($container);
=> $new_row.find("td.warning:last").wrapInner($container);