JSFiddle - React, Tailwind, and code Playground
HTML
<div class="row clearfix">
<div class="column span-4-12 property">
<p>Some text 1</p>
</div>
<div class="column span-4-12 property">
<p>Some text 2</p>
</div>
<div class="column span-4-12 property">
<p>Some text 3</p>
</div>
</div>
CSS
*, *:before, *:after {
margin: 0;
padding: 0;
-webkit-box-sizing: border-box !important;
-moz-box-sizing: border-box !important;
-ms-box-sizing: border-box !important;
box-sizing: border-box !important;
}
body {
background: grey;
}
}
.row {
clear: both;
}
.clearfix:before,
.clearfix:after {
content:"";
display:table;
}
.clearfix:after {
clear:both;
}
.clear {
zoom:1;
}
.column {
display: block;
float:left;
}
.span-4-12 {
width: 33.33%;
}
.property {
background: white;
margin-left: 2%;
}