JSFiddle - React, Tailwind, and code Playground

by oilvier

HTML

<div class="table">
    <div class="cell grid-2-3">
        <div class="box">
            <div class="table">
                <div class="cell first-col">
                    <div class="wrap">
                        <div class="iso">
                            <p>Cras ullamcorper massa a mauris vestibulum, a finibus orci pulvinar.</p>
                        </div>
                    </div>
                </div>
                <div class="cell">
                    <div class="iso-right iso">
                        <p>Cras ullamcorper massa a mauris vestibulum, a finibus orci pulvinar. Etiam sit amet nisi a quam sodales scelerisque et vitae erat. Donec pretium fermentum lectus, sagittis hendrerit ipsum sodales nec. Morbi id porta mauris, ut tincidunt justo nullam.
                        </p>
                    </div>
                </div>
            </div>
        </div>
    </div>
    <div class="cell grid-1-3">
        <div class="box box-right">
            <div class="iso"><p>Cras ullamcorper massa a mauris vestibulum, tincidunt justo nullam.
                </p></div>
        </div>
    </div>
</div>
<hr>
<div class="grids">
    <div class="grid-2-3">
        <div class="box box-equal">
            <div class="table">
                <div class="cell first-col">
                    <div class="wrap">
                        <div class="iso">
                            <p>Cras ullamcorper massa a mauris vestibulum, a finibus orci pulvinar.</p>
                        </div>
                    </div>
                </div>
                <div class="cell">
                    <div class="iso-right iso">
                        <p>Cras ullamcorper massa a mauris vestibulum, a finibus orci pulvinar. Etiam sit amet nisi a quam sodales scelerisque et vitae erat. Donec pretium fermentum lectus, sagittis hendrerit ipsum sodales nec. Morbi id porta mauris, ut tincidunt justo nullam.
                        </p>
                    </div>
               ...

CSS

* {box-sizing:border-box; margin:0; padding:0;}
body {font-family: FreeSans, Arimo, "Droid Sans", Helvetica, Arial, sans-serif;}
hr {margin:20px 0;}

.table {display:table; width:100%; height:100%;}
	.cell {display:table-cell; height:100%;}
		.cell .table {height:100%;}

.wrap {position:relative; height:100%;}
.wrap:after {content:""; position:absolute; top:0; left:100%; z-index:2; width:25px; height:100%; background:url(data:image/svg+xml;base64,IDxzdmcgY2xhc3M9InRyaWFuZ2xlIiB2ZXJzaW9uPSIxLjEiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyIgdmlld0JveD0iMCAwIDI1IDI0NCIgcHJlc2VydmVBc3BlY3RSYXRpbz0ibm9uZSI+DQogICAgICAgIDxwb2x5Z29uIHBvaW50cz0iMCwwIDAsMjQ0IDI1LDEyMiIvPg0KICAgIDwvc3ZnPg==) no-repeat right center; background-size:100% 100%;}

.box {border:1px solid red; height:100%; min-height:100%;}
	.iso {padding:20px;}
	.iso-right {margin-left:25px;}


.box-right {margin-left:20px; position: relative;}
	.box-right .iso:before {content:"ou"; background:red; padding:10px; width: 20px; position: absolute; top:50%; right:100%; margin-right:-10px; transform:translateY(-50%);}
.first-col {background:red;}







/* Grid
================ */
/**
 * Système de grille fluide (%age)
 * Le parent `grids` ne peut contenir que des `grid-*` comme enfants
 * L'unité "grid" doit obligatoirement commencer par une class `grid-*`
 * OK
 <div class="grids">
 	<div class="grid-1-2"></div>
 </div>
 **********
 * Pas OK
 <div class="grids">
 	<h2>Titre</h2>
 	<div class="grid-1-2"></div>
 </div>
 **********
 * Pas OK
 <div class="grids">
 	<div class="box-border grid-1-2"></div>
 </div>
 * Les imbrications sont possibles, en gardant la même structure `.grids>.grid-*`
 <div class="grids">
 	<div class="grid-1-2">
 		<div class="grids">
 			<div class="grid-1-3"></div>
 			<div class="grid-1-3"></div>
 			<div class="grid-1-3"></div>
 		</div>
 	</div>
 	<div class="grid-1-2"></div>
 </div>
 */
.grids {margin-left:-var(--gutter); letter-spacing:-0.31em;
	/* Corriger le problème avec les...

JavaScript

/**
* jquery.matchHeight-min.js v0.5.2
* http://brm.io/jquery-match-height/
* License: MIT
*/
(function(d){var g=-1,e=-1,n=function(a){var b=null,c=[];d(a).each(function(){var a=d(this),k=a.offset().top-h(a.css("margin-top")),l=0<c.length?c[c.length-1]:null;null===l?c.push(a):1>=Math.floor(Math.abs(b-k))?c[c.length-1]=l.add(a):c.push(a);b=k});return c},h=function(a){return parseFloat(a)||0},b=d.fn.matchHeight=function(a){if("remove"===a){var f=this;this.css("height","");d.each(b._groups,function(a,b){b.elements=b.elements.not(f)});return this}if(1>=this.length)return this;a="undefined"!==
typeof a?a:!0;b._groups.push({elements:this,byRow:a});b._apply(this,a);return this};b._groups=[];b._throttle=80;b._maintainScroll=!1;b._beforeUpdate=null;b._afterUpdate=null;b._apply=function(a,f){var c=d(a),e=[c],k=d(window).scrollTop(),l=d("html").outerHeight(!0),g=c.parents().filter(":hidden");g.css("display","block");f&&(c.each(function(){var a=d(this),b="inline-block"===a.css("display")?"inline-block":"block";a.data("style-cache",a.attr("style"));a.css({display:b,"padding-top":"0","padding-bottom":"0",
"margin-top":"0","margin-bottom":"0","border-top-width":"0","border-bottom-width":"0",height:"100px"})}),e=n(c),c.each(function(){var a=d(this);a.attr("style",a.data("style-cache")||"").css("height","")}));d.each(e,function(a,b){var c=d(b),e=0;f&&1>=c.length||(c.each(function(){var a=d(this),b="inline-block"===a.css("display")?"inline-block":"block";a.css({display:b,height:""});a.outerHeight(!1)>e&&(e=a.outerHeight(!1));a.css("display","")}),c.each(function(){var a=d(this),b=0;"border-box"!==a.css("box-sizing")&&
(b+=h(a.css("border-top-width"))+h(a.css("border-bottom-width")),b+=h(a.css("padding-top"))+h(a.css("padding-bottom")));a.css("height",e-b)}))});g.css("display","");b._maintainScroll&&d(window).scrollTop(k/l*d("html").outerHeight(!0));return this};b._applyDataApi=function(){var a={};d("[data-match-height], [data-mh]").each(function(){var...