JSFiddle - React, Tailwind, and code Playground

by Victor

HTML

<div id="content">
    <div class="1c2">cdcss</div>
    <div class="1c2">scsd</div>
    
    <div class="2c2">csdcsd</div>
    
    
    
</div>

CSS

#content {
    width:600px;
}
#content div {
	min-height:20px;
    display:block;
    -webkit-box-sizing: border-box; /* Safari/Chrome, other WebKit */
-moz-box-sizing: border-box;    /* Firefox, other Gecko */
box-sizing: border-box;     
    padding:10px;
}

.1c2 { width:50% !important; }
.2c2 { width:100% !important; background:green}

.1c3 { width: 33.333%; }
.2c3 { width: 66.666%; }
.3c3 { width: 100%; }

.1c4 { width: 25%; }
.2c4 { width: 50%; }
.3c4 { width: 75%; }
.4c4 { width: 100%; }

.1c5 { width: 20%; }
.2c5 { width: 40%; }
.3c5 { width: 60%; }
.4c5 { width: 80%; }
.5c5 { width: 100%; }

.1c8 { width:12.5% ; }
.2c8 { width: 25%; }
.3c8 { width: 37.5; }
.4c8 { width: 50%; }
.5c8 { width: 62.5; }
.6c8 { width: 75%; }
.7c8 { width: 87.5%; }
.8c8 { width: 100%; }