JSFiddle - React, Tailwind, and code Playground

by Blake Plumb

HTML

<div class="container">
    <div class="row-fluid">
        <div class="span4">hello <img src="http://placehold.it/350x150"/></div>
        <div class="offset2 span4">test this is a test of long text in a div blah blah blah</div>
        <div class="span2">blah</div>
    </div>
    <div class="row-fluid">
        <div class="span4">hello <img src="http://placehold.it/350x150"/></div>
        <div class="span4">test this is a test of long text in a div blah blah blah</div>
        <div class="span4">blah</div>
    </div>
 </div>

CSS

.row-fluid div{
    background: #f5f5f5;
    padding: 10px;
}
img {
  /* Responsive images (ensure images don't scale beyond their parents) */
  max-width: 100%;
  /* Part 1: Set a maxium relative to the parent */
  width: auto\9;
  /* IE7-8 need help adjusting responsive images */
  height: auto;
  /* Part 2: Scale the height according to the width, otherwise you get stretching */
  vertical-align: middle;
  border: 0;
}
[class*="span"] {
  float: left;
  min-height: 1px;
  margin-left: 20px;
}
.container{
  width: 940px;
}
.row-fluid {
  width: 100%;
}
.row-fluid:before,
.row-fluid:after {
  display: table;
  content: "";
  line-height: 0;
}
.row-fluid:after {
  clear: both;
}
.row-fluid [class*="span"] {
  display: block;
  width: 100%;
  min-height: 30px;
  -webkit-box-sizing: border-box;
  -moz-box-sizing: border-box;
  box-sizing: border-box;
  float: left;
  margin-left: 2.127659574468085%;
}
.row-fluid [class*="span"]:first-child {
  margin-left: 0;
}
.row-fluid .span12 {
  width: 100%;
}
.row-fluid .span11 {
  width: 91.48936170212765%;
}
.row-fluid .span10 {
  width: 82.97872340425532%;
}
.row-fluid .span9 {
  width: 74.46808510638297%;
}
.row-fluid .span8 {
  width: 65.95744680851064%;
}
.row-fluid .span7 {
  width: 57.44680851063829%;
}
.row-fluid .span6 {
  width: 48.93617021276595%;
}
.row-fluid .span5 {
  width: 40.42553191489362%;
}
.row-fluid .span4 {
  width: 31.914893617021278%;
}
.row-fluid .span3 {
  width: 23.404255319148934%;
}
.row-fluid .span2 {
  width: 14.893617021276595%;
}
.row-fluid .span1 {
  width: 6.382978723404255%;
}
.row-fluid .offset12 {
  margin-left: 104.25531914893617%;
}
.row-fluid .offset12:first-child {
  margin-left: 102.12765957446808%;
}
.row-fluid .offset11 {
  margin-left: 95.74468085106382%;
}
.row-fluid .offset11:first-child {
  margin-left: 93.61702127659574%;
}
.row-fluid .offset10 {
  margin-left: 87.23404255319149%;
}
.row-fluid .offset10:first-child {
  margin-left: 85.1063829787234%;
}
.row-fluid .offset9 {
...