Highcharts custom label on responsive chart canvas

I am trying to get a custom label to fix on top of a column and resize with screen size changes. Also, I am trying to center the text inside the label (using bootstrap 3) but I have not been successful.

I have created a JSFIDDLE here showing my simple column chart and label.

My JS chart code is:

   chartObj = new Highcharts.Chart({
      credits: false,
      chart: {
        renderTo: divID,
        type: 'column',
        style: {
          fontFamily: chartFont
        }
      },
      title: {
        text: dataC.title,
        margin: 10,
        style: {
          fontSize: '15px'
        }
      },
      colors: ['#00A65A', '#F39C12', '#DD4B39'],
      exporting: {
        enabled: false
      },
      xAxis: {
        labels: {
          enabled: true
        },
        categories: dataC.xAxis,
        minorTickLength: 0,
        tickLength: 0
      },
      yAxis: {
        title: {
          text: ''
        },
        plotLines: [{
          value: 10,
          color: 'red',
          dashStyle: 'shortdash',
          width: 2,
          label: {
            text: 'GOAL',
            align: 'right',
            x: 0,
            y: -20,
            zIndex: 50,
            width: 2
          }
        }]
      },
      legend: {
        margin: 5,
        enabled: false
      },
      tooltip: {
        formatter: function() {
          retu this.x + ': ' + Highcharts.numberFormat(this.y, 0);
        }
      },
      plotOptions: {
        column: {
          dataLabels: {
            enabled: true,
            color: '#333333'
          }
        },
        series: {
          colorByPoint: true,
          colors: ['#00A65A', '#F39C12', '#DD4B39'],
          dataLabels: {
            enabled: true,
            style: {
              fontWeight: 'bolder',
              align: 'center'
            },
            formatter: function() {
              retu this.y;
            },
            inside: true
          },
          groupPadding: 0.02
        }
      },
      series: [{
        name: dataC.seriesName,
        data: dataC.seriesData
      }]
    }, function(chart) { // on complete
      var point = chart.series[0].points[2];
      chart.renderer.label('<div class="text-center">This is my message<br/>I want it to stay on top of red bar<br/>center text in callout<br/>and be responsive!</div>', 610, 50, 'callout', point.plotX + chart.plotLeft, point.plotY + chart.plotTop)
        .css({
          color: '#FFFFFF'
        })
        .attr({
          fill: 'rgba(0, 0, 0, 0.75)',
          padding: 8,
          r: 5,
          zIndex: 6
        })
        .add();

    });