JQuery Slicknav, merge two menus in one, but on 2 columns

on a wordpress custom theme, I’m using slicknav menu to create a responsive mobile menu.
It works great, so I decide to merge the second menu present on my site (category menu) in the mobile menu.
Using this codePen it’s simple and easy, but I’d like to separate the menus in two floating columns, left category and right the global menu.

see image:

I currently can insert a “<hr>” between one menu and the other, using combinedMenu.append("<hr>");, but if I “append” to create the float combinedMenu.append("<div class='col-sm-6'>"); the resulting code is

<li><a>.....</a></li>
<li><a>.....</a></li>
<div class='col-sm-6'></div>
<li><a>.....</a></li>

so it closes the tag itself! GRRRRR

can anyone helps me?

bye, L.