JSFiddle - React, Tailwind, and code Playground

HTML

<div class='btn' id='btn_1'>
<div class="button_top" id='btn_top_1'></div>
<div class="button_bottom" id='btn_bottom_1'></div>
</div>

<div class='btn' id='btn_2'>
<div class="button_top" id='btn_top_2'></div>
<div class="button_bottom" id='btn_bottom_2'></div>
</div>

CSS

body {
margin:200px 200px 200px 200px;
}

.btn{
    float:left;
    margin-left: 20px;
}


.button_top {
    border-radius: 20px 20px 0px 0px; 
	background:#5fa0af; 
	height:50px;
	width:150px;
}

.button_bottom {
    border-radius: 0px 0px 20px 20px; 
	background:#5fa0af; 
	height:50px;
	width:150px;
}

JavaScript

var btn_1_opened = false;
var btn_2_opened = false;

$('#btn_1').click(function() {  
  	if(btn_2_opened == true){
	$('#btn_bottom_2').animate({marginTop: '0px'}, {duration: 500, queue: false});
	$('#btn_top_2').animate({marginTop: '0px'}, {
	duration: 500, 
	queue: false,
	complete: function() {
	btn_2_opened = false;	
	}
});
}     
    if (btn_1_opened == false) {
	$('#btn_bottom_1').animate({marginTop: "+100px"}, {duration: 500, queue: false});
	$('#btn_top_1').animate({marginTop: "-50px"}, {
	duration: 500, 
	queue: false,
	complete: function() {
btn_1_opened = true;
	}
	});
    } else if(btn_1_opened == true){
	$('#btn_bottom_1').animate({marginTop: "0px"}, {duration: 500, queue: false});
	$('#btn_top_1').animate({marginTop: "0px"}, {
	duration: 500, 
	queue: false,
	complete: function() {
btn_1_opened = false;
	}
});
}
});


$('#btn_2').click(function() {  
  	if(btn_1_opened == true){
	$('#btn_bottom_1').animate({marginTop: '0px'}, {duration: 500, queue: false});
	$('#btn_top_1').animate({marginTop: '0px'}, {
	duration: 500, 
	queue: false,
	complete: function() {
	btn_1_opened = false;	
	}
});
}     
    if (btn_2_opened == false) {
	$('#btn_bottom_2').animate({marginTop: "+100px"}, {duration: 500, queue: false});
	$('#btn_top_2').animate({marginTop: "-50px"}, {
	duration: 500, 
	queue: false,
	complete: function() {
btn_2_opened = true;
	}
	});
    } else if(btn_2_opened == true){
	$('#btn_bottom_2').animate({marginTop: "0px"}, {duration: 500, queue: false});
	$('#btn_top_2').animate({marginTop: "0px"}, {
	duration: 500, 
	queue: false,
	complete: function() {
btn_2_opened = false;
	}
});
}
});