Bootstrap / CSS styling for a floating design

Hello, I have a prototype html page that shows how to render some boxes in a self made jquery tree browser. It is set up on top of bootstrap and uses a kind of floating design. On left side the actual level element is shown on right side all the dependend elements (any level) below that node are floating. Now I need to change the design to what is shown in the second image. Actual node on left side, then next level node on right side floating BUT if there are child nodes below the next level then it should be shown as this wide box that is shown in the new mockup. The problem is that the actual approach has the (green) coloring bar on the <a> tag. So its not possible to just add inner divs with same logical structure. The lower levels need also to float because there can be (theoretical) any number of grand childs. For a really experienced bootstrap, css and html guy this will be a very quick html mockup to create. I only want an updated mockup (html/css) to know how I need to implement rendering in my jquery plugin.