JSFiddle - React, Tailwind, and code Playground

HTML

<div class="viewport1">
    <p class="e">Viewport 1: Demonstrates min-width</p>
<div class="root">
    <div class="colFixed"></div>
    <div class="colFluid">
        <img src="http://placehold.it/20x150">
    </div>
</div>
</div>
    
<div class="viewport2">
    <p class="e">Viewport 2: Demonstrates default width</p>
<div class="root">
    <div class="colFixed"></div>
    <div class="colFluid">
        <img src="http://placehold.it/200x150">
    </div>
</div>
    </div>
    
<div class="viewport2">
    <p class="e">Viewport 2: But it should resize to the picture</p>
<div class="root">
    <div class="colFixed"></div>
    <div class="colFluid">
        <img src="http://placehold.it/400x150">
    </div>
</div>
    </div>

CSS

.e
{
    font-size:20px;
}
.viewport1, .viewport2
{
    border-width:1px;
    border-color:#000000;
    border-style:solid;
    padding:20px;
}
.viewport1
{
    width:300px;
}
.viewport2
{
    width:800px;
}
.root
{
    background-color:#FFCCCC;
    min-width:400px;
    max-width:600px;
    padding:20px;
}
.colFixed
{
    background-color:#CCFFFF;
    width:200px;
    float:right;
    height:150px;
    padding:20px;
}
.colFluid
{
    background-color:#FFCCFF;
    overflow:hidden;
    padding:20px;
}