JSFiddle - React, Tailwind, and code Playground

by qfox

HTML

<div class="list list_sizing_px">
    <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:border-box;
    width:25%;
    height:100px; /* fixed height */
    border:1px solid red;
    padding:0 0 0 0;
    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;
}