JSFiddle - React, Tailwind, and code Playground

HTML

<div id="chart"></div>

CSS

body {
    background: #fff;
}

.bar-container { display:inline-block; width:100%; height:10px; border-radius: 2px; }
.bar { position:relative; display:inline-block; height:10px; transition: all 0.5s; }

.bar-label {
	position: absolute;
	bottom: -30px;
	font-size: 12px;
	text-align: center;
}

.short { left:-20px; }
.avg { position:relative; display:inline-block; margin: 0px auto; bottom: -10px; width: 100%}
.long { right:-20px; }

.notch {
	display: inline-block;
    width: 4px;
    height: 12px;
    position: absolute;
    top: -11px;
    left: 48%;
	border-radius: 2px;
}

JavaScript

var CHART = function(o, options, container) {
    $.each(o, function(key, data) {
        var parent = $("<div>"),
			full = $('<span>').addClass('bar-container'),
			bar = $('<span>').addClass('bar'),
			labelShort = $('<span>').html('Shortest<br />' + data.short).addClass('bar-label short'),
			labelAvg = $('<span>').html('Average<br />' + data.avg).addClass('bar-label avg'),
			notch = $('<span>').addClass('notch'),
			labelLong = $('<span>').html('Longest<br />' + data.long).addClass('bar-label long');
        parent.css({ padding: '30px' });
		full.css({ background: options.barBackground });
		//bar.css({ marginLeft: (data.short / 10) + '%', width: (data.long / 10) + '%', background: options.barColor });
		bar.css({
			width: normalize(data.short, data.range[0], data.range[1]) + '%',
			marginLeft: normalize(data.long, data.range[0], data.range[1]) + '%',
			background: options.barColor
		});
		notch.css({ background: options.notchColor });
        parent.append('<span>Par ' + key + '</span>');
        bar.append(labelShort);
		labelAvg.prepend(notch);
        bar.append(labelAvg);
        bar.append(labelLong);
        full.append(bar);
        parent.append(full);
        container.append(parent);
    });
	
	function normalize(val, max, min) {
		var t = 100 - 1;
		var b = max - min;
		var l = val - max;
		var r = 100;
		return (t / b) * l + r;
	}
	
};

var chart = new CHART({
    3: {
        range: [50, 300],
        short: 103,
        avg: 133,
        long: 166,
        total: 5
    },
    4: {
        range: [200, 600],
        short: 202,
        avg: 344,
        long: 420,
        total: 5
    },
    5: {
        range: [400, 800],
        short: 307,
        avg: 466,
        long: 502,
        total: 5
    }
}, {
    barBackground: '#e5e5e5',
    barColor: '#3d7be3',
	notchColor: '#2c59b5'
}, $('#chart'));