JSFiddle - React, Tailwind, and code Playground

HTML

<div id="bar-container">
    <div class="bar" style="background-color: red;"></div>
    <div class="bar" style="background-color: orange;"></div>
    <div class="bar" style="background-color: green;"></div>
    <div class="bar" style="background-color: blue;"></div>
</div>

CSS

#bar-container
{
    width: 500px;
    border: 2px solid #666;
}

.bar
{
    display: inline-block;
    height: 30px;
    margin: 0;
    padding: 0;
}

JavaScript

jQuery.fn.cleanWhitespace = function() {
    textNodes = this.contents().filter(
        function() { return (this.nodeType == 3 && !/\S/.test(this.nodeValue)); })
        .remove();
    return this;
}

$('#bar-container').cleanWhitespace();
var bars = $('.bar');
bars.each(function()
          {
              $(this).css('width', (100 / bars.length) + '%');
          });