JSFiddle - React, Tailwind, and code Playground

HTML

<div class="desktop">
    <div id="wrapper">
        <div id="a" class="box">1</div>
        <div id="b" class="box">2</div>
        <div id="c" class="box">3</div>
        <div id="d" class="box">4</div>
        <div id="e" class="box">5</div>
        <div id="f" class="box">6</div>
        <div id="g" class="box">7</div>
    </div>
</div>

CSS

#wrapper {
    margin: 0 auto;
    width: 60px;
}

.desktop #wrapper {
    width: 120px;
}

.box {
    width: 40px;
    height: 40px;
    margin-bottom: 10px;
    border: 1px solid black;
    padding: 5px;
}

.box {
    float: left;
}

.desktop #a {
    width: 110px;
}

#b, #e {
    height: 70px;
}

#a, #b, #e {
    clear: left;
}

#c, #d, #f, #g {
    height: 20px;
}

.desktop #c, .desktop #d, .desktop #f, .desktop #g {
    float: right;
    clear: right;
}