JSFiddle - React, Tailwind, and code Playground

HTML

<!DOCTYPE html>
<html lang="es">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <link rel="stylesheet" href="responsive-media-queries.css">
</head>
<body>
    <div class="contenedor" style="color: white;font-size: 2em;">
        <div class="fila">
            <div style="background-color: red;" class="columna-largo-2 columna-mediano-2 columna-peque-3 columna-mini-12">
                <p>Texto</p>
            </div>
            <div style="background-color: green;" class="columna-largo-6 columna-mediano-5 columna-peque-9 columna-mini-12">
                <p>Lorem ipsum dolor sit, amet consectetur adipisicing elit. Dolorum numquam unde consectetur fugiat, blanditiis, a tenetur in nulla similique vel sapiente architecto eum non nesciunt ad? Ipsam assumenda dolorum maxime?</p>
                
                <p>Cum, officia, numquam minima vero autem sapiente incidunt perferendis sit sequi consectetur asperiores suscipit eius debitis culpa quos veritatis! Commodi magnam odio reiciendis tenetur cum nesciunt fugiat maiores molestias numquam?</p>
                
                <p>Maxime quae dolores exercitationem distinctio? Totam dignissimos recusandae aliquam corrupti expedita suscipit asperiores tempora libero, dolorem minima nostrum atque autem voluptatibus rem, praesentium, molestias facilis cumque? Nihil pariatur quibusdam quod.</p>
            </div>
            <div style="background-color: blue;" class="columna-largo-4 columna-mediano-5 columna-peque-12 columna-mini-12">
                <p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Ipsam error asperiores, hic voluptatum quos maxime a eaque magnam? Non debitis eaque aut officia tenetur ipsam labore neque rerum maxime corrupti.</p>

                <p>Enim quos et consectetur est nesciunt eum veniam impedit dolor omnis odio, doloremque vitae...

CSS

/*
Estilos Globales
*/
*
{
    margin: 0px;
    padding: 0px;
    list-style: none;
    text-decoration: none;
    font-family: sans-serif;
    box-sizing: border-box;
}
 
.contenedor
{
    position: relative;
    margin: auto;
    width: 100%;
    height: auto;
}
 
.fila
{
    display: flex;
    align-items: stretch;
    flex-wrap: wrap;
    
    position: relative;
    margin: auto;
    width: 100%;
    height: auto;
    clear: both;
}
 
[class*="columna-"]
{
    float: left;
    border: 2px solid black;
    /*padding: 20px;*/
}
 
/*Pantallas*/
@media (min-width: 1200px)
{
    .columna-largo-12{width:100%;}
    .columna-largo-11{width:calc(11*100%/12);}
    .columna-largo-10{width:calc(10*100%/12);}
    .columna-largo-9{width:calc(9*100%/12);}
    .columna-largo-8{width:calc(8*100%/12);}
    .columna-largo-7{width:calc(7*100%/12);}
    .columna-largo-6{width:calc(6*100%/12);}
    .columna-largo-5{width:calc(5*100%/12);}
    .columna-largo-4{width:calc(4*100%/12);}
    .columna-largo-3{width:calc(3*100%/12);}
    .columna-largo-2{width:calc(2*100%/12);}
    .columna-largo-1{width:calc(1*100%/12);}
}
 
@media (max-width:1199px) and (min-width:992px)
{
    .columna-mediano-12{width:100%;}
    .columna-mediano-11{width:calc(11*100%/12);}
    .columna-mediano-10{width:calc(10*100%/12);}
    .columna-mediano-9{width:calc(9*100%/12);}
    .columna-mediano-8{width:calc(8*100%/12);}
    .columna-mediano-7{width:calc(7*100%/12);}
    .columna-mediano-6{width:calc(6*100%/12);}
    .columna-mediano-5{width:calc(5*100%/12);}
    .columna-mediano-4{width:calc(4*100%/12);}
    .columna-mediano-3{width:calc(3*100%/12);}
    .columna-mediano-2{width:calc(2*100%/12);}
    .columna-mediano-1{width:calc(1*100%/12);}
}
 
@media (max-width:991px) and (min-width:768px)
{
    .columna-peque-12{width:100%;}
    .columna-peque-11{width:calc(11*100%/12);}
    .columna-peque-10{width:calc(10*100%/12);}
    .columna-peque-9{width:calc(9*100%/12);}
   ...