JSFiddle - React, Tailwind, and code Playground

by lasha

HTML

<div class="container">
    <div class="one">1</div>
    <div class="two">2</div>
    <div class="three">3</div>
</div>

CSS

body {
    margin: 0;
}

.container {
    height: 300px;
    /* background-color: #ccc; */
    overflow: hidden;
}

.one, .two, .three {
    width: 300px;
    position: absolute;
    text-align: center;
}

.one {
   background-color: #F00; 
}

.two {
   background-color: #0F0;
   left: 300px;
}

.three {
   background-color: #00F;
   left: 600px;
}

JavaScript

$(window).resize(function(){
    var theWidth = $(this).width();
    
    $(".one, .two, .three, .container").width(theWidth);
    
    $(".two").css("left", theWidth);
    $(".three").css("left", theWidth * 2);
}).resize();