JSFiddle - React, Tailwind, and code Playground

by bjankord

HTML

<div class="wrap flex-direction-row align-items-center">
	<div class="child red"><img src="//placehold.it/50x50"></div>
	<div class="child green"><img src="//placehold.it/50x100"></div>
	<div class="child blue"><img src="//placehold.it/100x50"></div>
</div>

CSS

* {
	box-sizing: border-box;
}

body {
	font-family: "Arial", sans-serif;
	margin: 20px;
	max-width: 960px;
}

h1 {
	font-size: 30px;
	margin: 30px 0 0;
}

h2 {
	font-size: 20px;
	margin: 30px 0 0;
}

img {
	display: block;
}

img[src="//placehold.it/50x50"] {
	width: 50px;
	height: 50px;
}

img[src="//placehold.it/50x100"] {
	width: 50px;
	height: 100px;
}

img[src="//placehold.it/100x50"] {
	width: 100px;
	height: 50px;
}

img[src="//placehold.it/100x200"] {
	width: 100px;
	height: 200px;
}

.wrap {
	background-color: #f3f3f3;
	border: 1em solid #dddddd;
	margin: .5em 0 0;
	padding: 2em;
}

.child {
	background-color: #ffffff;
	margin: .5em 1em;
	padding: 1.5em 1em .5em;
	border-style: solid;
	border-width: .5em;
}

.red {
	border: .5em solid #cc0000;
}

.green {
	border: .5em solid #008800;
}

.blue {
	border: .5em solid #0000ff;
}

.flex-direction-row,
.flex-direction-column {
	-js-display: flex;
	display: block;
	display: flex;
}

.flex-direction-row {
	flex-direction: row;
}

.flex-direction-column {
	flex-direction: column;
}

.align-items-flex-start {
	align-items: flex-start;
}

.align-items-flex-end {
	align-items: flex-end;
}

.align-items-center {
	align-items: center;
}

.align-items-stretch {
	align-items: stretch;
}

JavaScript

!function(){window.flexibility={},Array.prototype.forEach||(Array.prototype.forEach=function(t){if(void 0===this||null===this)throw new TypeError(this+"is not an object");if(!(t instanceof Function))throw new TypeError(t+" is not a function");for(var e=Object(this),i=arguments[1],n=e instanceof String?e.split(""):e,r=Math.max(Math.min(n.length,9007199254740991),0)||0,o=-1;++o<r;)o in n&&t.call(i,n[o],o,e)}),function(t,e){"function"==typeof define&&define.amd?define([],e):"object"==typeof exports?module.exports=e():t.computeLayout=e()}(flexibility,function(){var t=function(){function t(e){if((!e.layout||e.isDirty)&&(e.layout={width:void 0,height:void 0,top:0,left:0,right:0,bottom:0}),e.style||(e.style={}),e.children||(e.children=[]),e.style.measure&&e.children&&e.children.length)throw new Error("Using custom measure function is supported only for leaf nodes.");return e.children.forEach(t),e}function e(t){return void 0===t}function i(t){return t===q||t===U}function n(t){return t===Z||t===G}function r(t,e){if(void 0!==t.style.marginStart&&i(e))return t.style.marginStart;var n=null;switch(e){case"row":n=t.style.marginLeft;break;case"row-reverse":n=t.style.marginRight;break;case"column":n=t.style.marginTop;break;case"column-reverse":n=t.style.marginBottom}return void 0!==n?n:void 0!==t.style.margin?t.style.margin:0}function o(t,e){if(void 0!==t.style.marginEnd&&i(e))return t.style.marginEnd;var n=null;switch(e){case"row":n=t.style.marginRight;break;case"row-reverse":n=t.style.marginLeft;break;case"column":n=t.style.marginBottom;break;case"column-reverse":n=t.style.marginTop}return null!=n?n:void 0!==t.style.margin?t.style.margin:0}function l(t,e){if(void 0!==t.style.paddingStart&&t.style.paddingStart>=0&&i(e))return t.style.paddingStart;var n=null;switch(e){case"row":n=t.style.paddingLeft;break;case"row-reverse":n=t.style.paddingRight;break;case"column":n=t.style.paddingTop;break;case"column-reverse":n=t.style.paddingBottom}return null!=n&&n>=0?n:void...