JSFiddle - React, Tailwind, and code Playground

HTML

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-beta.2/css/bootstrap.min.css">
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="row">

  <div class="col-12 thisBlock">
  
  
    <div class="row no-gutters">

      <div class="col c">

        <div class="block">
           <ul class="ul d-flex justify-content-between">
            <li class="d-inline-block">1</li>
            <li class="d-inline-block">2</li>
          </ul>
        </div>

      </div>

      <div class="col c">

        <div class="block">
           <ul class="ul d-flex justify-content-between">
            <li class="d-inline-block">11</li>
            <li class="d-inline-block">22</li>
            <li class="d-inline-block">33</li>
          </ul>
        </div>

      </div>
      
      <div class="col c">

        <div class="block">
           <ul class="ul d-flex justify-content-between">
            <li class="d-inline-block">11</li>
            <li class="d-inline-block">22</li>
            <li class="d-inline-block">33</li>
            <li class="d-inline-block">44</li>
          </ul>
        </div>

      </div>
      
    </div>
    
    
  </div>
  
</div>

CSS

.c {
  background-color: green;
  color: white;
  width: 100%;
}

.ul {
    padding: 0;
    margin: 0 2px;
    background-color: #dfe0e2;
    padding: 5px;
}
.ul li {
  background-color: #5d5d5d;
    color: #919191;
    cursor: default;
    width: 100%;
    margin: 0 2px;
}

JavaScript

var totalLi = $('.thisBlock li').length;

$('.thisBlock .c').each(function(index, element){
	var cLi = $(element).find('li').length;
  $(element).css({'flex-basis':cLi/totalLi *100 +'%'})
})