JSFiddle - React, Tailwind, and code Playground

HTML

<div class="wrapper">
        
    <img src="http://images.gizmag.com/gallery_tn/cassini-earth-image-1.jpg" class="item"/>
    <img src="http://images.gizmag.com/gallery_tn/cassini-earth-image-1.jpg" class="item"/>
    <img src="http://images.gizmag.com/gallery_tn/cassini-earth-image-1.jpg" class="item"/>
    <div class="item last">
        <img src="http://images.gizmag.com/gallery_tn/cassini-earth-image-1.jpg" class="item"/>     
    </div>
    
    <div class="item flexible">
        <div class='w'>Lorem ipsum dolor sit amet, consectetur adipisicing elit.</div>
</div>

SCSS

.wrapper {
    &:after {
        display: block;
        clear: both;
        content: '';
    }
}

.item {
    float: left;
    
    padding: 5px;
    border: 1px solid #eee;
    
    &.flexible {
        float: none;
        overflow: hidden;
    }
    
    &.last {
        float: right;
    }
}

.w {    
    border: 2px solid pink;
    background-color: pink;
    height: 50px;
    min-width: 20px;
    max-width: 300px;
}