html - Horizontal div tree -

i want generate horizontal tree out of nested divs using css without javascript. child elements should in same depth. therefore, created nested div structure float left , clear elements. child elements aren't in same depth:

please see jsfiddle: https://jsfiddle.net/bpb680l9/

is possible, position child element relative left side of parent, not text element within parent? or adjust high of text parent, following child elements adjusted end of text element? or there other elegant solution build horizontal tree variable number of child elements , siblings css , html?

css

div.layout {     border: 1px solid black;     display: inline-block;     position: relative;     left: 50px; } div.clear {     clear: both; } 

html

<div>     content     <div class="layout">         content         <div class="layout">             content         </div>         <div class="clear"></div>         <div class="layout">             content         </div>         <div class="clear"></div>     </div>     <div class="clear"></div>     <div class="layout">         content         <div class="layout">             content             <div class="layout">                 content                     <div class="layout">                         content                     </div>                     <div class="clear"></div>                 </div>                 <div class="clear"></div>             </div>             <div class="clear"></div>         </div>         <div class="clear"></div>     </div>     <div class="clear"></div> </div> <div class="clear"></div> 

any appreciated!

check out jsfiddle: https://jsfiddle.net/bpb680l9/2/

<div id="wrapper"><span class="label">root</span>   <div class="branch lv1"> <div class="entry"><span class="label">entry-1</span>   <div class="branch lv2">     <div class="entry"><span class="label">entry-1-1</span>       <div class="branch lv3">         <div class="entry sole"><span class="label">entry-1-1-1</span></div>       </div>     </div>     <div class="entry"><span class="label">entry-1-2</span>       <div class="branch lv3">         <div class="entry sole"><span class="label">entry-1-2-1</span></div>       </div>     </div>     <div class="entry"><span class="label">entry-1-3</span>       <div class="branch lv3">         <div class="entry sole"><span class="label">entry-1-3-1</span></div>       </div>     </div>   </div> </div> <div class="entry"><span class="label">entry-2</span></div> <div class="entry"><span class="label">entry-3</span>   <div class="branch lv2">     <div class="entry"><span class="label">entry-3-1</span></div>     <div class="entry"><span class="label">entry-3-2</span></div>     <div class="entry"><span class="label">entry-3-3</span>       <div class="branch lv3">         <div class="entry"><span class="label">entry-3-3-1</span></div>         <div class="entry"><span class="label">entry-3-3-2</span>           <div class="branch lv4">             <div class="entry"><span class="label">entry-3-3-2-1</span></div>             <div class="entry"><span class="label">entry-3-3-2-2</span></div>           </div>         </div>         <div class="entry"><span class="label">entry-3-3-3</span></div>       </div>     </div>     <div class="entry"><span class="label">entry-3-4</span></div>   </div> </div> <div class="entry"><span class="label">entry-4</span></div> <div class="entry"><span class="label">entry-5</span></div> 

i've used divs, css more complicated trully support horizontal tree