JSFiddle - React, Tailwind, and code Playground

by Curry

HTML

<div class = "outer">
    <img src ="http://www.bostonbakesforbreastcancer.org/wp-content/uploads/2012/03/sun.jpg" class = "inner" />
     <img src ="http://www.bostonbakesforbreastcancer.org/wp-content/uploads/2012/03/sun.jpg" class = "inner" />
    
     <img src ="http://www.bostonbakesforbreastcancer.org/wp-content/uploads/2012/03/sun.jpg" class = "inner" />

</div>

<br/>
Do not want extra black around images. Do not know beforehand how many images there will be.
<br/>
<br/>

<div class = "outer">
    <img src ="http://www.bostonbakesforbreastcancer.org/wp-content/uploads/2012/03/sun.jpg" class = "inner" />
     <img src ="http://www.bostonbakesforbreastcancer.org/wp-content/uploads/2012/03/sun.jpg" class = "inner" />
</div>

CSS

.outer{background:black;
max-width:160px;
display:inline-block;
font-size:0;
border:1px solid red; /* demonstrates that it has really collapsed and shrunk */
}

.inner{background:yellow;
    width:50px;
}