JSFiddle - React, Tailwind, and code Playground

HTML

<div class="table">
  <div class="cards">
    <div class="card">1</div>
    <div class="card">2</div>
    <div class="card">3</div>
    <div class="card">4</div>
  </div>
</div>

CSS

.cards {
  position: relative;
  cursor: pointer;
}
.card {
  display: inline-block;
  margin-left: -50px;
  width: 50px;
  height: 100px;
  background-color: #000;
  border: #fff 4px solid;
  color: #fff;
  padding: 5px;
  transition-duration: .4s;
}
.card:first-child {
  margin-left: 0px;
}

JavaScript

$(document).ready(function(){
	$(".cards").on("click", function(){
  	let activeOddBlock = $(".card:odd");
  	let activeEvenBlock = $(".card:even");
    let stylesEven = {
    	"margin-left"      : "20px",
      "overflow"         : "hidden"
    };
    let stylesOdd = {
      "margin-left" : "20px",
      "margin-top"  : "30px"
    };
    activeOddBlock.css( stylesOdd );
    activeEvenBlock.css( stylesEven );
  });
});