JSFiddle - React, Tailwind, and code Playground

by lbstr

HTML

<div id="wrapper">
    <ul class="french" id="chartControls">
        <li class="control floatL first">
            <a field="1" href="JavaScript:void(0)" class="changeRange">1j</a>
        </li>
        <li class="bar floatL">|</li>
        <li class="control floatL">
            <a field="7" href="JavaScript:void(0)" class="changeRange">1s</a>
        </li>
        <li class="bar floatL">|</li>
        <li class="control floatL">
            <a field="21" href="JavaScript:void(0)" class="changeRange">3s</a>
        </li>
        <li class="bar floatL">|</li>
        <li class="control floatL">
            <a field="90" href="JavaScript:void(0)" class="changeRange">3m</a>
        </li>
        <li class="bar floatL">|</li>
        <li class="control floatL">
            <a field="180" href="JavaScript:void(0)" class="changeRange">6m</a>
        </li>
        <li class="bar floatL">|</li>
        <li class="control floatL last">
            <a field="155" href="JavaScript:void(0)" class="changeRange active">YTD</a>
        </li>
        <li class="clearFix"></li>
    </ul>
</div>

CSS

body,div,p,table,caption,tbody,tfoot,thead,tr,th,td,h1,h2,h3,h4,h5,h6,
ul,ol,li,dl,dt,dd,pre,form,fieldset,legend,input,textarea,blockquote,iframe {
    margin:0;
    padding:0;
}

table {
    border-collapse:collapse;
    border-spacing:0;
}

caption,th {
    text-align:left;
}

fieldset,img,abbr,acronym { 
    border:0;
}

address,caption,cite,code,dfn,em,th,var {
    font-style:normal;
    font-weight:normal;
}

strong {
    font-weight:bold;
}

ol,ul {
    list-style:none;
}

h1,h2,h3,h4,h5,h6 {
    font-weight:normal;
}

.hasLayout, .contain {
    *zoom:1;
}

.contain:after {
    content:".";
    display:block;
    height:0;
    clear:both;
    visibility:hidden;
}

.capitalize {
    text-transform:capitalize;
}

.upperCase {
    text-transform:uppercase;
}

.lowerCase {
    text-transform:lowercase;
}

.floatLeft {
    float:left;
    _display:inline;
}

.floatRight {
    float:right;
    _display:inline;
}

.none {
    display:none;
}


/* CIBC Main Styles */
body, div, fieldset, form,h1, h2, h3, h4, h5, h6,iframe,img, input, label, ul, li, ol,p, table, td, th, tr{margin:0; padding:0;}
body, table{font-family:Arial,Helvetica,sans-serif;color:#383838;font-size:11px;}
.hasLayout{zoom:1;}
.hasLayout:after{content:".";display:block;height:0;clear:both;visibility:hidden;}
img{border:none;}
input.text, select, textarea{padding:1px;background-color:#FFFFCC;color:#484848;vertical-align:middle;}
a, a:link, a:visited, a:active, a:focus{color:#AF0B1C;outline:0 none;text-decoration:none;}
a:hover{text-decoration:none;}
h2 a, h2 a:link, h2 a:visited, h2 a:active{color:#AF0B1C;outline:0 none;background:#FFDF7B;}
h2 a:hover{text-decoration:none;}
p{line-height:15px;}

.subTxt, .tableSubText,.timestamp{font-weight:normal; font-size:11px;}
.tableSubText{color:#000;}
.lightText{color:#666}
.asterisk{color:#cc0000;font-size:14px;}
.floatL{float:left;}
.floatR{float:right;}
.floatL,.floatR{overflow:hidden;}
.floatNone{float:none;}
.clear, .clearFix, div.clear,...

JavaScript

function adjustTimeSpacing(){
    var $wrap = $('#chartControls'),
        $controls = $wrap.find('.control'),
        $bars = $wrap.find('.bar'),
        numBars = $bars.length,
        availableWidth = $wrap.width(),
        textWidth = 0,
        spacePerSide;
    
    textWidth = $bars.width() * numBars;
    
    $controls.each(function(){
        textWidth += $(this).width();
    });
    
    spacePerSide = (availableWidth - textWidth) / (numBars * 2);
    
    if (spacePerSide > 0) {
        $controls.width(function(index, oldWidth){
            var multiplier = (index % numBars === 0 ? 1 : 2);
            return oldWidth + (multiplier * spacePerSide);
        });
    }
}

adjustTimeSpacing();