JSFiddle - React, Tailwind, and code Playground

HTML

<h3>Clear Fixed</h3>
<div class="cf">
    <img src="//upload.wikimedia.org/wikipedia/commons/thumb/6/6e/Balzac.jpg/220px-Balzac.jpg" />
    <div>some text here</div>
</div>
    
    <h3>No Clearfix - What no Background Color!?!? And what is going on with that boarder</h3>
    
    <div class="nocf">
        <img src="//upload.wikimedia.org/wikipedia/commons/thumb/6/6e/Balzac.jpg/220px-Balzac.jpg" />
    <div>some text here</div>
        
</div>
    
<h3>Clear Fixed - Fixed Width</h3>
<div class="cf fixed">
    <img src="//upload.wikimedia.org/wikipedia/commons/thumb/6/6e/Balzac.jpg/220px-Balzac.jpg" />
    <div>    
        <p>    some text heresome text heresome text heresome text heresome text heresome text heresome text heresome text heresome text heresome text heresome text heresome text heresome text heresome text heresome text heresome text heresome text heresome text heresome text heresome text heresome text heresome text heresome text heresome text heresome text heresome text heresome text heresome text heresome text heresome text heresome text here</p>
        <p>some text heresome text heresome text heresome text heresome text heresome text heresome text heresome text heresome text heresome text heresome text heresome text heresome text heresome text heresome text heresome text heresome text heresome text heresome text heresome text heresome text heresome text heresome text heresome text heresome text heresome text heresome text heresome text heresome text heresome text heresome text here</p>
</div>    
</div>
    
<h3>Clear Fixed - Calulated Width</h3>
<div class="cf calc">
    <img src="//upload.wikimedia.org/wikipedia/commons/thumb/6/6e/Balzac.jpg/220px-Balzac.jpg" />
    <div>    
        <p>    some text heresome text heresome text heresome text heresome text heresome text heresome text heresome text heresome text heresome text heresome text heresome text heresome text heresome text heresome text heresome text heresome text heresome text heresome...

CSS

img {width:100px;}
.cf img, .nocf img {float:left;}
.cf div, .nocf div   {float:left;}
.cf, .nocf {background-color:#F00;border: 1px solid black;}

.fixed div {width: 500px;}
.calc div {width: calc(100% - 100px);}
.dyno div {width:80%;}
.dyno img {width:20%;}

.fixed div p, .calc div p , .dyno div p {margin-top:0;}


h3 {clear:both;}

/**
 * For modern browsers
 * 1. The space content is one way to avoid an Opera bug when the
 *    contenteditable attribute is included anywhere else in the document.
 *    Otherwise it causes space to appear at the top and bottom of elements
 *    that are clearfixed.
 * 2. The use of `table` rather than `block` is only necessary if using
 *    `:before` to contain the top-margins of child elements.
 */
.cf:before,
.cf:after {
    content: " "; /* 1 */
    display: table; /* 2 */
}

.cf:after {
    clear: both;
}

/**
 * For IE 6/7 only
 * Include this rule to trigger hasLayout and contain floats.
 */
.cf {
    *zoom: 1;
}