JSFiddle - React, Tailwind, and code Playground

by DelphinPRO

HTML

<div class="col-sm-12">
        <div class="col-sm-6 abc-1">
          
        </div>
        <div class="col-sm-6 abc-2">
          Click me!
        </div>
</div>

CSS

.abc-1{
  height: 200px;
  background: red;
}
.abc-2{
  height: 200px;
  background: yellow;
  cursor: pointer;
}
.col-sm-6 {
  float: left;
  width: 50%;
}
.col-sm-12 {
  float: left;
  width: 100%;
}

JavaScript

$('.abc-2').on('click', function(){
		$(this).hide();
    $('.abc-1').removeClass('col-sm-6').addClass('col-sm-12');
});