JSFiddle - React, Tailwind, and code Playground

by ti2005

HTML

<div class="outer-container">
    <span class="box box1">1</span>
    <span class="box box2">2</span>
    <span class="box box3">3</span>
    <div class="inner-container">
        <span class="box box4">4</span>
        <span class="box box5">5</span>
    </div>
</div>

<div class="outer-container">
    <span class="box box1">1</span>
    <span class="box box2">2</span>
    <span class="box box3">3</span>
    <div class="inner-container">
        <span class="box box4">4</span>
        <span class="box box5">5</span>
    </div>
</div>

CSS

body { display: flex; align-items: flex-start; }

.outer-container {
    display: flex;
    flex-wrap: wrap;
    padding: 6px 0;
    background-color: #f5f5f5;
    border: 1px solid #ccc;
    width: 250px;
    box-sizing: border-box;
    margin-right: 15px;
}

.box {
    height: 100px;
    width: 50px;
    margin: 5px;
    background-color: lightgreen;
    border: 1px solid #ccc;
    display: flex;
    justify-content: center;
    align-items: center;
    font-size: 1.2em;
}

.inner-container {
    display: flex;
    flex-direction: column;
    order: 4;
    flex: 0 1 calc(50% - 10px - 2px); /* width less margin less borders */
}

.box1 { flex: 0 1 calc(50% - 10px - 2px); order: 1; }
.box2 { flex: 0 1 calc(50% - 10px - 2px); order: 2; }
.box3 { flex: 0 1 calc(50% - 10px - 2px); order: 3; }
.box4 { flex: 0 1 calc(50% - 10px - 2px); width: 100%; }
.box5 { flex: 0 1 calc(50% - 10px - 2px); width: 100%; }

div.outer-container:last-of-type > .box1 { flex: 0 1 calc(100% - 10px - 2px); order: 1; }
div.outer-container:last-of-type > .inner-container { order: 2; margin-right: 10px; }
div.outer-container:last-of-type > .box2 { order: 3; }
div.outer-container:last-of-type > .box3 { order: 4; flex: 1 1 100%; }