I have created a bar chart in which bars are resizable and draggable.Now I want to add some content in the left end of the bar and the position of content should be relative to the position of bar(if resized) ie if the bar resize then the position of content then bar should not overlap the content but should be change to the end of bar
I have tried to append the string using property "float:left" and .append(), but the content is populating in the bar itself while I need the content(string) outside the bar.

Below is the code to refer:
//JavaScript:
createProgressBar : function(days, cls, desc, label, dataObj,value) {
var cellWidth = tools.getCellSize();
var strong= "Hello";
var barMarg = tools.getProgressBarMargin() || 0;
/*var bar1=$(
'<div class="bar" id="stretch"></div>')*/
var bar = $(
'<div class="bar" id="stretch"><div class="fn-label">'+ label+
'</div></div>').addClass(cls).css({
width : ((cellWidth * days) - barMarg) + 5

}).data("dataObj", dataObj).append('<div>'+strong+'</div>');

//CSS:
.fn-gantt .bar .fn-label {
line-height: 18px;
font-weight: bold;
white-space: nowrap;
/* width: 80%; */
text-overflow: ellipsis;
overflow: hidden;
color: #FFFFFF;
text-align: center;
font-size: 12px;
float:left;

Could anyone please help me out ..