Snapsvg Element Display Order Issue

I am using snapsvg.io library and unsure why the following code is not displaying my rectangle with text over my svg line element.

Based on the order I have placed my code, I assumed that my rect/text group would be on top of my line but unfortunately this is not the case and can't figure out what I am doing wrong.

The code sample I have is as follows:

line = s.line(trunkLeftPos, 100, trunkLeftPos, 440);
line.attr({
  stroke: error1 ? alert : error2 ? alert : stroke,            
  strokeWidth: 1
});

var text = s.text(trunkLeftPos + 4, trunkLeftTextPos, 'my text');

text.attr({
  fill: error1 ? alert : error2 ? alert : textColorOK,            
  fontSize: '11px',
  'font-weight': '600',
  'font-family': 'Arial Narrow, sans-serif',
  'text-anchor': 'start',
  cursor: error1 ? 'pointer' : error2 ? 'pointer' : 'default',            
});

var rect_bg = s.rect(trunkLeftPos + 2, trunkLeftTextPos - 10, 50, 13, 0, 0).attr({fill: "rgb(236, 240, 241)",stroke: "#1f2c39",strokeWidth: 1});                
var g0 = s.g(rect_bg,text);

What I have tried to show you here is the order of play where I expected my g0 element to be placed over my line element but from what I can see, the vertical line appears over the top of my g0 element and not below it.

Any ideas?