{% comment %}

Mockup barplot

{% endcomment %}

<style>
    .w-10px { width: 10px; }
    .w-20px { width: 20px; }
    .w-40px { width: 40px; }
    .w-50px { width: 50px; }
    .w-60px { width: 60px; }
    .w-100px { width: 100px; }
    .w-350px { width: 350px; }

    .h-10px { height: 10px; }
    .h-120px { height: 120px; }
    .h-130px { height: 130px; }
    .h-160px { height: 160px; }
    .h-175px { height: 175px; }
    .h-200px { height: 200px; }
    .h-210px { height: 210px; }
</style>

<div class="row">
    <div class="col-auto d-flex justify-content-around align-items-baseline w-350px">
        <span class="placeholder w-20px h-200px"></span>
        <span class="placeholder w-20px h-130px"></span>
        <span class="placeholder w-20px h-120px"></span>
        <span class="placeholder w-20px h-160px"></span>
        <span class="placeholder w-20px h-175px"></span>
        <span class="placeholder w-20px h-210px"></span>
        <span class="placeholder w-20px h-120px"></span>
        <span class="placeholder w-20px h-160px"></span>
        <span class="placeholder w-20px h-130px"></span>
        <span class="placeholder w-20px h-160px"></span>
        <span class="placeholder w-20px h-120px"></span>
    </div>
    <div class="col-auto">
        <span class="placeholder h-10px w-100px"></span>
        <br />

        <span class="placeholder h-10px w-10px"></span>
        <span class="placeholder h-10px w-60px"></span>
        <br />

        <span class="placeholder h-10px w-10px"></span>
        <span class="placeholder h-10px w-40px"></span>
        <br />

        <span class="placeholder h-10px w-10px"></span>
        <span class="placeholder h-10px w-50px"></span>
        <br />

        <span class="placeholder h-10px w-10px"></span>
        <span class="placeholder h-10px w-60px"></span>
    </div>
</div>