JSFiddle - React, Tailwind, and code Playground

HTML

<div>
    <img src="http://placehold.it/200x400" alt=""/><img src="http://placehold.it/200x400/bada55" alt=""/>
</div>

<br /><br /><br /><br /><br /><br />

<div style="height: 100%; width: 100%;" class="siteWrapper">
 <img style="float: left;" src="http://placehold.it/200x400" alt="error"/><img style="margin:left 201px;" src="http://placehold.it/200x400/bada55" alt="error"/>
</div>

<br /><br /><br /><br /><br /><br />

<div class="wrap">
    <img src="http://placehold.it/200x400/00ff00" alt=""/><img src="http://placehold.it/200x400/green" alt=""/>    
</div>

<br /><br /><br /><br /><br /><br />

<div class="no-clearfix wrap">
    <img src="http://placehold.it/200x400/00ff00" alt=""/><img src="http://placehold.it/200x400/green" alt=""/>    
</div>

<br /><br /><br /><br /><br /><br />

<div class="clearfix wrap">
    <img src="http://placehold.it/200x400/00ff00" alt=""/><img src="http://placehold.it/200x400/green" alt=""/>    
</div>

CSS

.clearfix:before, .clearfix:after {
	content: "\0020";
	display: block;
	height: 0;
	overflow: hidden;
}
	
.clearfix:after {
	clear: both;
}


.no-clearfix {
    clear: both;
}

.wrap {
    padding: 20px;
    background-color: #bad;
}

    .wrap img {
        float: left;
    }



br {
    clear: both;
}