JSFiddle - React, Tailwind, and code Playground

HTML

<h1>Избавляем веб от черной магии <code>-.31em</code> с <code>-.43em</code></h1>
<h2>Да здравствует future-proof и progressive enhancement!</h2>
<h3>Старые баги, так и быть, побьем их же оружием, но для будущего — только чистые стандарты!</h3>

<div class="new-g">
    <div class="new-u-1-2">
        <div class="content"><label>1/2</label></div>
    </div>
    <div class="new-u-1-2">
        <div class="content"><label>1/2</label></div>
    </div>
</div>
<div class="new-g">
    <div class="new-u-1-4">
        <div class="content"><label>1/4</label></div>
    </div>
    <div class="new-u-1-4">
        <div class="content"><label>1/4</label></div>
    </div>
    <div class="new-u-1-4">
        <div class="content"><label>1/4</label></div>
    </div>
    <div class="new-u-1-4">
        <div class="content"><label>1/4</label></div>
    </div>
</div>
<div class="new-g">
    <div class="new-u-3-4">
        <div class="content"><label>3/4</label></div>
    </div>
    <div class="new-u-1-4">
        <div class="content"><label>1/4</label></div>
    </div>
</div>
<div class="new-g">
    <div class="new-u-1-3">
        <div class="content"><label>1/3</label></div>
    </div>
    <div class="new-u-1-3">
        <div class="content"><label>1/3</label></div>
    </div>
    <div class="new-u-1-3">
        <div class="content"><label>1/3</label></div>
    </div>
</div>
<div class="new-g">
    <div class="new-u-1-3">
        <div class="content"><label>1/3</label></div>
    </div>
    <div class="new-u-2-3">
        <div class="content"><label>2/3</label></div>
    </div>
</div>
<div class="new-g">
    <div class="new-u-1-5">
        <div class="content"><label>1/5</label></div>
    </div>
    <div class="new-u-2-5">
        <div class="content"><label>2/5</label></div>
    </div>
    <div class="new-u-2-5">
        <div class="content"><label>2/5</label></div>
    </div>
</div>
<div class="new-g">
    <div class="new-u-3-5">
        <div class="content"><label>3/5</label></div>
...

CSS

.new-g {
    word-spacing: -1em; /* гарантированно хватит, чтоб сплющить пробел */
    display: table;     /* для старых вебкитов — воспользуемся другим их багом, см. http://www.css-lab.com/bug-test/webkit-wordspace-bugfix.html */
    width: 100%;        /* так, чтоб это ничему не мешало */
    display: -webkit-flex;       /* для новых вебкитов воспользуемся прогрессивным улучшением */
    justify-content: flex-start;
    align-items: flex-start;
}

@supports(flex-flow: row wrap)  { /* в светлом будущем прогрессивно улучшим всё для всех:) */
    .new-g { display: flex; }
}

.new-u,
.new-u-1,
.new-u-1-2,
.new-u-1-3,
.new-u-2-3,
.new-u-1-4,
.new-u-3-4,
.new-u-1-5,
.new-u-2-5,
.new-u-3-5,
.new-u-4-5,
.new-u-1-6,
.new-u-5-6,
.new-u-1-8,
.new-u-3-8,
.new-u-5-8,
.new-u-7-8,
.new-u-1-12,
.new-u-5-12,
.new-u-7-12,
.new-u-11-12,
.new-u-1-24,
.new-u-5-24,
.new-u-7-24,
.new-u-11-24,
.new-u-13-24,
.new-u-17-24,
.new-u-19-24,
.new-u-23-24 {
    display: inline-block;
    letter-spacing: normal;
    word-spacing: normal;
    vertical-align: top;
    flex: none;             /* флексбоксы настолько гибкие, что могут быть и негибкими:) */
}

.new-u-1 {
    display: block;
}

.new-u-1-2 {
    width: 50%;
}

.new-u-1-3 {
    width: 33.33333%;
}

.new-u-2-3 {
    width: 66.66666%;
}

.new-u-1-4 {
    width: 25%;
}

.new-u-3-4 {
    width: 75%;
}

.new-u-1-5 {
    width: 20%;
}

.new-u-2-5 {
    width: 40%;
}

.new-u-3-5 {
    width: 60%;
}

.new-u-4-5 {
    width: 80%;
}

.new-u-1-6 {
    width: 16.656%;
}

.new-u-5-6 {
    width: 83.33%;
}

.new-u-1-8 {
    width: 12.5%;
}

.new-u-3-8 {
    width: 37.5%;
}

.new-u-5-8 {
    width: 62.5%;
}

.new-u-7-8 {
    width: 87.5%;
}

.new-u-1-12 {
    width: 8.3333%;
}

.new-u-5-12 {
    width: 41.6666%;
}

.new-u-7-12 {
    width: 58.3333%;
}

.new-u-11-12 {
    width: 91.6666%;
}

.new-u-1-24 {
    width: 4.1666%;
}

.new-u-5-24 {
    width: 20.8333%;
}

.new-u-7-24 {
    width: 29.1666%;
}

.new-u-11-24 {
    width:...