JSFiddle - React, Tailwind, and code Playground

by Jack 0

HTML

<!DOCTYPE html>
		<title>Result</title>
	<body>
		<div class="columnx">ZZZZZZZZZ XXXXXXXX XXXXXXXX XXXXXXXX XXXXXXXX XXXXXXXX XXXXXXXX XXXXXXXX XXXXXXXX XXXXXXXX XXXXXXXX XXXXXXXX XXXXXXXX XXXXXXXX XXXXXXXX XXXXXXXX XXXXXXXX</div>
		<div class="columnx">zzzzzzz xxxxxxxx xxxxxxxx xxxxxxxx xxxxxxxx xxxxxxxx xxxxxxxx xxxxxxxx xxxxxxxx xxxxxxxx xxxxxxxx xxxxxxxx xxxxxxxx</div>
        <div>jjjjjjj jjjjjjj jjjjjjj jjjjjjj jjjjjjj jjjjjjj jjjjjjj jjjjjjj jjjjjjj jjjjjjj jjjjjjj jjjjjjj jjjjjjj jjjjjjj jjjjjjj jjjjjjj </div>
        <div>==== Float below Float  below Float  below Float  below Float below  ====</div>
        <div class="wrap"> WRAP wrap 
            <div class="columny">ZZZZZZZZZZZ YYYYYYYYYY YYYYYYYYYY YYYYYYYYYY YYYYYYYYYY YYYYYYYYYY YYYYYYYYYY YYYYYYYYYY YYYYYYYYYY YYYYYYYYYY </div>
		    <div class="columny">zzzzzzz yyyyyyy yyyyyyy yyyyyyy yyyyyyy yyyyyyy yyyyyyy yyyyyyy yyyyyyy yyyyyyy yyyyyyy yyyyyyy </div>
        </div>
        <div>JJJJ JJJJ JJJJ JJJJ JJJJ JJJJ JJJJ JJJJ JJJJ JJJJ JJJJ JJJJ JJJJ JJJJ JJJJ JJJJ JJJJ JJJJ JJJJ JJJJ JJJJ JJJJ JJJJ JJJJ JJJJ JJJJ JJJJ JJJJ  </div>
	</body>

CSS

.columnx{
    display: inline-block;
	*display:      inline;  /* for IE5&6 */
	*zoom:              1;  /* for IE5&6 */
    vertical-align:   top; 
    width:            49%;
}

.columny{
    float: left;
    width: 49%;
}

.wrap{
    overflow:auto; /* IE7&CSS3 compatible */
    /* display:table; works too */
}