I've been scratching my head for a while, but I just can't seem to make it work. On the fiddle link provided, you'll notice three main blocks in light gray, each containing a variable number of smaller dark blocks. My goal is to have these smaller blocks evenly spaced across the width of the screen or relative to the .thisBlock block. The markup is pretty complex, so I've only included the essential parts. Link to the Fiddle
<div class="row">
<div class="col-12">
<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>
Here's the CSS snippet:
.c {
background-color: green;
margin: 0 2px;
color: white;
width: 100%;
}
.ul {
padding: 0;
margin: 0;
background-color: #dfe0e2;
padding: 5px;
}
.ul li {
background-color: #5d5d5d;
color: #919191;
cursor: default;
width: 100%;
margin: 0 2px;
}