Wrap element around children of main element. JQLite

I'm using angular and JQLite. I have an element <md-button my-attr>MyText<md-icon>close</md-icon> with a attribute directive.

In my attr directive I want to wrap <div layout=row flex></div> around the <md-button> children.

I used wrap(), children().wrap(), I tried replacing the contents() with a wrapped contents(). The problem I keep having is:

<md-button my-attr><div layout=row flex>MyText</div><div layout=row flex><md-icon>close</md-icon></div></md-button>

I need 1 div wrapped around both of them.

<md-button><div layout=row flex>MyText<md-icon>close</md-icon></div></md-button>

// $element is // I tried several things, this is the last thing I tried.

        var content = $element.children().wrap('<div layout=row flex></div>');
        $element.empty();
        $element.append(content);

To clarify.

<md-button> is $element. I want to wrap the children of $element in a single div. so <md-button><child/><child/><child/></md-button> becomes <md-button><div><child/><child/><child/></div></md-button>

       var content = "<div layout=row flex>" + $element.html() + "</div>";
        $element.empty();
        $element.append(content);

Was able to get it from: #1