JSFiddle - React, Tailwind, and code Playground

by Marcelo Aymone

HTML

<link rel="stylesheet" href="//maxcdn.bootstrapcdn.com/bootstrap/3.3.1/css/bootstrap.min.css">
<link rel="stylesheet" href="//maxcdn.bootstrapcdn.com/font-awesome/4.2.0/css/font-awesome.min.css">
<div class='container'>
    <div class='row'>
        <div class='root node'>
            <p><i class="fa fa-user"></i>
            </p>
            <p>root name</p>
            <p>150</p>
            <div class='lft'>
                <p><i class="fa fa-user"></i>
                </p>
                <p>lft name</p>
                <p>200</p>
                <div class='node'>
                    <div class='lft'>
                        <p><i class="fa fa-user"></i>
                        </p>
                        <p>lft name</p>
                        <p>100</p>
                        <div class='lft'>
                            <p><i class="fa fa-user"></i>
                            </p>
                            <p>lft name</p>
                            <p>200</p>
                            <div class='node'>
                                <div class='lft'>
                                    <p><i class="fa fa-user"></i>
                                    </p>
                                    <p>lft name</p>
                                    <p>50</p>
                                    <div class='lft'>
                                        <p><i class="fa fa-user"></i>
                                        </p>
                                        <p>lft name</p>
                                        <p>50</p>
                                    </div>
                                    <div class='rgt'>
                                        <p><i class="fa fa-user"></i>
                                        </p>
                                        <p>rgt name</p>
                                        <p>100</p>
                                    </div>
                                </div>
                               ...

CSS

.container {
    overflow-x: auto;
}
.root {
    position: absolute !important;
    margin:0;
    padding:0;
    display:block;
    text-align:center;
    font-size: 10px;
    background-color: #ddd;
}
.node {
    width: auto;
    height:auto;
}
.lft, .rgt {
    margin:5px;
    margin-top: 10px;
    min-width:40px;
    min-height:40px;
}
.rgt {
    border:1px solid #000;
    float:right;
    background-color: #ccc;
}
.lft {
    border:1px solid #fff;
    float:left;
    background-color: #eee;
}

JavaScript

$('.node').each(function () {
    var vm = $(this);
    lftwid = vm.children(".lft").width();
    rgtwid = vm.children(".rgt").width();
    if (lftwid != rgtwid) {
        if (lftwid > rgtwid) {
            vm.children(".rgt").width(lftwid);
        } else {
            vm.children(".lft").width(rgtwid);
        }
    }
});