JSFiddle - React, Tailwind, and code Playground

by Michael Bazos

HTML

<div class="container">
    <div class="lang azeri"></div>
    <div class="lang bosnian"></div>
    <div class="lang german"></div>
    <div class="lang spanish"></div>
    <div class="lang russian"></div>
    <div class="lang french"></div>
</div>

CSS

.container {
    display: flex;
    height: 100vh;
    flex-flow: column wrap;
}


/* ----------------------------------------------- */

.lang {
    width: 200px;
    border: 1px solid black;
    margin-bottom: 20px;
}

.azeri, .spanish {
    height: 30px;
}

.bosnian, .russian {
    height: 170px;
}

.german, .french {
    height: 80px;
}