JSFiddle - React, Tailwind, and code Playground

by extempl

HTML

<div class="container">
    <div class="block1">1</div>
    <div class="block2">2</div>
    <div class="block4">4</div>
    <div class="block3">3</div>
    <div class="block5">5</div>
</div>

CSS

.container {
    font-size: 60px;
    width: 3em;
}

.container div {
    float: left;
    border: 1px solid black;
    box-sizing: border-box;
    text-align: center;
    color: lightgray;
}
.block1, .block4, .block5 {
    width: 1em;
    height: 1em;
}
.block2 {
    width: 2em;
    height: 2em;
    float: right !important;
}
.block3 {
    width: 2em;
    height: 1em;
}