How do I float icon between rows?

I am attempting to float an icon between two rows in Ionic. In this case an Ionic Link Icon. I’ve done this in the past with a combination of z-index and position:absolute.

My current code in the below codepen shows the icon above one row and below the following even though I have set the z-index to 1.

http://codepen.io/kevbaker/pen/lcHqK

Any thoughts?

I think I got it by tweaking the container margin top and bottom and allowing overflow:visible.