JSFiddle - React, Tailwind, and code Playground

by someprimetime

HTML

<div class="review-histogram">
    <ul>
        <li> <span class="location">San Francisco</span>

            <div class="bar-container">
                <div class="star_bar_5" style=""></div>
            </div> <span class="neutral dfssm">10%</span>

        </li>
                     <li> <span class="location">San Francisco</span>

            <div class="bar-container">
                <div class="star_bar_5" style=""></div>
            </div> <span class="neutral dfssm">10%</span>

        </li>
                <li> <span class="location">San Francisco</span>

            <div class="bar-container">
                <div class="star_bar_5" style=""></div>
            </div> <span class="neutral dfssm">10%</span>

        </li>
                <li> <span class="location">San Francisco</span>

            <div class="bar-container">
                <div class="star_bar_5" style=""></div>
            </div> <span class="neutral dfssm">10%</span>

        </li>
                <li> <span class="location">San Francisco</span>

            <div class="bar-container">
                <div class="star_bar_5" style=""></div>
            </div> <span class="neutral dfssm">10%</span>

        </li>
    </ul>
</div>

SCSS

.review-histogram {
  li {
    clear: both;
    display: inline-block;
    float: left;
    margin-bottom: 1px;
    overflow: hidden;
    width: 100%;
        
    .location {
        width: 80px;
        overflow: hidden;
        
    }
        
    .bar-container {
      float: left;
      height: 20px;
      padding: 0;
      width: 250px;
    }
  }
    span {
        float: left;
    }
}


.star_bar_5 {
    width: 2%;
    height: 20px;
    background: #01c;
}