JSFiddle - React, Tailwind, and code Playground

by qfox

HTML

<div class="list">
    <div class="list__item">abc</div>
    <div class="list__item">def</div>
    <div class="list__item">ghi</div>
    <div class="list__item">jkl</div>
    <div class="list__item">mno</div>
    <div class="list__item list__item_size_wide">qwu</div>
    <div class="list__item list__item_size_wide">qwu2</div>
    <div class="list__item">prs</div>
    <div class="list__item">qwu</div>
    <div class="list__item list__item_size_wide">qwu</div>
    <div class="list__item list__item_size_wide">qwu2</div>
    <div class="list__item">prs</div>
    <div class="list__item">qwu</div>
</div>

CSS

body {
    width:480px;
    padding:20px;
    margin:0;
}
.list {
    display:block;
    box-sizing:border-box;
    width:100%;
}
.list__item {
    list-style:none;
    float:left;
    box-sizing:content-box;
    width:25%;
    height:100px; /* fixed height */
    border:1px solid red;
    margin:-1px 0 0 -1px;
}
.list__item_size_wide {
    width:50%;
}

.list_sizing_px .list__item {
    width:101px;
}
.list_sizing_px .list__item_size_wide {
    width:201px;
}