JSFiddle - React, Tailwind, and code Playground

HTML

<div class="flexlayout">
<item>item</item>
<item>item</item>
<item>item</item>
<item>item</item>
<item>
    <item>
        <item>
              <banner>i am the banner</banner>
        </item>
    </item>
</item>
</div>

CSS

.flexlayout {
	display: flex;
}
banner, item {
    display: block;
    border: 1px solid black;
    flex-grow: 1; 
}
banner {
    background-color: lightgreen;
    -webkit-animation: banner-animation 2s linear 0s infinite alternate;
    animation: banner-animation 2s linear 0s infinite alternate;
}
item {
    background-color: lightblue;
}

@-webkit-keyframes banner-animation {
    from { margin-right: 1000px; }
    to { margin-right: 10px; }
}

@keyframes banner-animation {
    from { margin-right: 1000px; }
    to { margin-right: 10px; }
}