How to create a simple column chart using Flex layout in css

<div class="his_box">
    <div>Score distribution histogram</div>
    <div class="histogram">
        <div><div>10</div></div>
        <div><div>8</div></div>
        <div><div>15</div></div>
        <div><div>12</div></div>
        <div><div>5</div></div>
    </div>
</div>

.his_box{ /*box*/
            width: 400px;
            height: 220px;
            border: solid 1px #1E90FF;
            display: flex;
            flex-direction: column;
            align-items: center;
        }
        .histogram{ /*histogram*/
            display: flex;
        }
        .histogram>div{ /*a tile*/
            width: 30px;
            height: 200px; /*Block height at 100%*/
            font-size: 14px;
            text-align: center;
            margin-right: 5px;
            display: flex;
            flex-direction: column-reverse;
        }
        .histogram>div:nth-child(3n) div{ /*tile color*/
            background-color: #ff404b;
        }
        .histogram>div:nth-child(3n+1)div{
            background-color: #99CCFF;
        }
        .histogram>div:nth-child(3n+2)div{
            background-color: #F0AD4E;
        }
        .histogram>div:nth-child(1)div{
            flex: 0 0 50%; /*20 is 100%, 50% is 10*/
        }
        .histogram>div:nth-child(2)div{
            flex: 0 0 40%; /*8/20*/
        }
        .histogram>div:nth-child(3)div{
            flex: 0 0 75%; /*15/20*/
        }
        .histogram>div:nth-child(4)div{
            flex: 0 0 60%; /*12/20*/
        }
        .histogram>div:nth-child(5)div{
            flex: 0 0 25%; /*5/20*/
        }

.his_box{ /*box*/
            width: 400px;
            height: 220px;
            border: solid 1px #1E90FF;
            display: flex;
            flex-direction: column;
            justify-content: space-between;
        }
        .his_box>div{
            text-align: center;
        }
        .histogram{ /*histogram*/
            display: flex;
            flex-direction: column;
        }
        .histogram>div{ /*a tile*/
            height: 30px;
            width: 200px; /*Block width at 100%*/
            line-height: 30px;
            font-size: 14px;
            text-align: right;
            margin-bottom: 5px;
            display: flex;
        }
        .histogram>div:nth-child(3n) div{ /*tile color*/
            background-color: #ff404b;
        }
        .histogram>div:nth-child(3n+1)div{
            background-color: #99CCFF;
        }
        .histogram>div:nth-child(3n+2)div{
            background-color: #F0AD4E;
        }
        .histogram>div:nth-child(1)div{
            flex: 0 0 50%; /*20 is 100%, 50% is 10*/
        }
        .histogram>div:nth-child(2)div{
            flex: 0 0 40%; /*8/20*/
        }
        .histogram>div:nth-child(3)div{
            flex: 0 0 75%; /*15/20*/
        }
        .histogram>div:nth-child(4)div{
            flex: 0 0 60%; /*12/20*/
        }
        .histogram>div:nth-child(5)div{
            flex: 0 0 25%; /*5/20*/
        }