JSFiddle - React, Tailwind, and code Playground
HTML
<div id="wrapper">
<div id="innerWrapper">
<div class="item">Item - 1</div>
<div class="item">Item - 2</div>
<div class="item">Item - 3</div>
<div class="item">Item - 4</div>
<div class="item">Item - 5</div>
<div class="item">Item - 6</div>
</div>
</div>
<div id="other">I'm another element</div>
CSS
*,
*:before,
*:after {
margin: 0;
padding: 0;
box-sizing: border-box;
}
#wrapper {
background-color: lightblue;
position:absolute;
padding:5px;
}
#innerWrapper {;
background-color: blueviolet;
white-space: nowrap;
}
.item {
background-color: tomato;
width: 100px;
height: 100px;
border: 1px solid blue;
margin: 5px;
display:inline-block;
}
#other {
background-color: yellow;
width: 300px;
height: 250px;
}