JSFiddle - React, Tailwind, and code Playground

by Lucas Krause

HTML

<div class=a>
    <img src="http://futape.de/css/img/pixel.png" />
    <div class=b>
        <div class=c>
            <div class=d></div>
            <div class=d></div>
            <div class=d></div>
        </div>
    </div>
</div>

CSS

.a {
    height:100px;
    background:red;
    font-size:0;
    position:absolute;
    overflow:visible;
}

img {
    height:100%;
}

.b {
    width:100%;
    height:100%;
    background:yellow;
    overflow:hidden;
    position:absolute;
    top:0;
    left:0;
    padding-right:0;
}

.c {
    white-space:nowrap;
    height:100%;
    background:green;
    overflow:visible;
}

.d {
    display:inline-block;
    height:100%;
    background:pink;
    width:100%;
}
.d:first-child {
    background:peru;
}
.d:nth-child(2) {
    background:teal;
}