JSFiddle - React, Tailwind, and code Playground

by Tan

HTML

<div class="bg1"><div class="flex">This is a Flex solution</div></div>

<div class="bg2">

<div class="flex">

<div class="item1">This Div actually comes first This Div actually comes first This Div actually comes first This Div actually comes first This Div actually comes first This Div actually comes first</div>

<div class="item2">This Div actually comes second This Div actually comes second This Div actually comes second This Div actually comes second</div>

</div>
</div>

<div class="bg2">

<div class="flex">

<div class="fixed1">This Div actually comes first This Div actually comes first This Div actually comes first This Div actually comes first This Div actually comes first This Div actually comes first</div>

<div class="fixed2">FIXED WIDTH: This Div actually comes second This Div actually comes second This Div actually comes second This Div actually comes second</div>

</div>
</div>

CSS

body {margin:0;}


.contain {}

.flex {display:flex;max-width:700px;margin:auto;padding:10px;}

.item1 {order:2;background-color:#999;padding:10px;width:70%;}
.item2 {order:1;background-color:#999;padding:10px;margin:0 10px 0 0;width:30%;}

.fixed1 {order:2;background-color:#999;padding:10px;}
.fixed2 {order:1;background-color:#999;padding:10px;margin:0 10px 0 0;flex-grow: 0;flex-shrink: 0;flex-basis: 200px;}

.bg2 {background-color:#dedede;}
.bg1 {background-color:#666;}