JSFiddle - React, Tailwind, and code Playground

by ptriek

HTML

<html>
  <body>
    <div class='container'>
      <div class='inlineblock'></div><div class='inlineblock'></div><div class='inlineblock'></div>
    </div>

  </body>
</html>

CSS

body {
    text-align:center;
}
.container {
    display: inline-block;
    background-color: #aaa;
    text-align:left;
}
.inlineblock {
    display: inline-block;
    width: 200px;
    height: 200px;
    background-color: #eee;
}

JavaScript

var resizeContainer = function () {
    var w_window = $(window).width();
    var w_block = $('.inlineblock').width();
    if (w_window < w_block * 3 && w_window >= w_block * 2) {
        $('.container').width(w_block * 2);
    } else if (w_window < w_block * 2) {
        $('.container').width(w_block);
    }  else {
        $('.container').width(w_block * 3);
    } 
};
    
   

$(document).ready(resizeContainer);
$(window).resize(resizeContainer);