Compact dom elements in width

Is there any way to compact dom element in width to avoid free space that may be occupied by a small element? Maybe some libruary or script?

I created example from the image https://jsfiddle.net/0h9d53ma/

<ul class="list">
    <li class="list__item">long long tag</li>
    <li class="list__item">tag</li>
    <li class="list__item">tag long text</li>
    <li class="list__item">tag long sdf sdfsdtext</li>
    <li class="list__item">tag long  df d  randomftext</li>
    <li class="list__item">tag long text</li>
    <li class="list__item">tag long text</li>
    <li class="list__item">tag long text</li>
    <li class="list__item">tag long text</li>
    <li class="list__item">tagtag</li>
    <li class="list__item">middle</li>
    <li class="list__item">tag</li>
    <li class="list__item">middle</li>
    <li class="list__item">middle</li>
    <li class="list__item">tag</li>
    <li class="list__item"></li>
    <li class="list__item">middle</li>
    <li class="list__item"></li>
    <li class="list__item"></li>
    <li class="list__item">very long random text</li>
    <li class="list__item">very long random text</li>
    <li class="list__item">tag</li>
</ul>

and css

.list {
    display: flex;
    flex-wrap:wrap;
    border: 1px solid green;
    list-style: none;
    width: 250px;
    padding: 0;
    margin: 0;
}

.list__item {
    border: 1px solid orange;
    padding: 5px 2px;
}