JSFiddle - React, Tailwind, and code Playground

HTML

<link rel="stylesheet" href="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8.5/themes/cupertino/jquery-ui.css">
<div id="button1" class="ui-button ui-state-default ui-corner-all ui-widget">Red</div>
<div id="button2" class="ui-button ui-state-default ui-corner-all ui-widget">Green</div>
<br>

<div id="square-container">
  <div id="redsquare" class="square"></div>
  <div id="greensquare" class="square"></div>
</div>
<p>

</p>

CSS

html, body {
  margin: 0;
}

div.ui-state-default {
    padding: 0.4em 1em;
    line-height: 1.4;
}

.square {
  margin: 0;
  width: 50%;
  height:100%;
  float:left;
}

#redsquare {
  background-color:red;
}
#greensquare {
  background-color:green;
}

JavaScript

$('div#button1.ui-state-default').toggleClass('ui-state-active');
$('div#button2.ui-state-default').toggleClass('ui-state-active');

$(".square").height(100);
$(window).resize(function() {
	var sqPos = $("#square-container").position().top;
  var windowHeight = $(window).height();
  $("#square-container").height(windowHeight-sqPos);
  $(".square").height("100%");
})

$(window).resize();

$('div#button1.ui-state-default').click(event, function() {
    $(this).toggleClass('ui-state-active');
   if ($(this).hasClass("ui-state-active")) {
   	$("#redsquare").show();
    $("#greensquare").width("50%");
   } else {
    $("#redsquare").hide(); 
    $("#greensquare").width("100%");
   }
}).hover(function() {
    $(this).toggleClass('ui-state-hover');
}).disableSelection();

$('div#button2.ui-state-default').click(event, function() {
    $(this).toggleClass('ui-state-active');
   if ($(this).hasClass("ui-state-active")) {
    $("#greensquare").show();
    $("#redsquare").width("50%");
   } else {
		$("#greensquare").hide(); 
    $("#redsquare").width("100%");
   }
}).hover(function() {
    $(this).toggleClass('ui-state-hover');
}).disableSelection();

$('#checkbutton').button();