JSFiddle - React, Tailwind, and code Playground

HTML

<div class='modal'>
  <input id='editpositive' class='form__radio-input' type='radio' name='subgroupEdit' value='editpositive' checked=checked/>
  <label class='form__radio-label' for='editpositive'>
  <span class='form__radio-button'></span>Yes</label>

  <input id='editnegative' class='form__radio-input' type='radio' name='subgroupEdit' value='editnegative'/>
  <label class='form__radio-label' for='editnegative'>
  <span class='form__radio-button'></span>No</label>



  <div class="stuff">
    STUFF GOES HERE
  </div>
  <div class='section'>
    More bits doon 'ere
  </div>
</div>

CSS

.section {
  overflow: hidden;
  height: 100%;
  background-color: orange;
  width: 300px;
}

.stuff {
  background-color: yellow;
  width: 300px;
}
.modal {
  background-color: green;
  width: 600px;
}

JavaScript

const transitionSpeed = 0.05
let yesResolver
let isYesBusy = Promise.resolve(false)

let noResolver
let isNoBusy = Promise.resolve(false)

function getFullHeight (node) {
   return node ? node.clientHeight : 0
}

const section = document.querySelector('.section');
const editPositive = document.getElementById('editpositive')
const editNegative = document.getElementById('editnegative')
const radioDefaultState = editPositive.id
let radioState = radioDefaultState;
const fullHeight = getFullHeight(section)


let startDecrease;
function decreaseHeight(timestamp){
	isNoBusy = new Promise(resolve => {
  	noResolver = resolve
  })
	if (startDecrease === undefined) {
  	startDecrease = timestamp
  }  
  const elapsed = timestamp - startDecrease;
  	
  const nextMaxHeight = Math.max(fullHeight - (elapsed * transitionSpeed), 0)
 
  if (nextMaxHeight !== 0) {
  	section.style.maxHeight = `${nextMaxHeight}px`
  	window.requestAnimationFrame(decreaseHeight)
  } else {
  	section.style.maxHeight = '0px';
    startDecrease = undefined;
    noResolver(false)
  }
}

let startIncrease;
function increaseHeight(timestamp){
	isYesBusy = new Promise(resolve => {
  	yesResolver = resolve
  })
	if (startIncrease === undefined) {
  	startIncrease = timestamp
    
  }  
  const elapsed = timestamp - startIncrease;
  	
  const nextMaxHeight = Math.min(0 + (elapsed * transitionSpeed), fullHeight)
 
  if (nextMaxHeight !== fullHeight) {
  	section.style.maxHeight = `${nextMaxHeight}px`
  	window.requestAnimationFrame(increaseHeight)
  } else {
  	section.style.maxHeight = fullHeight;
    startIncrease = undefined;
    yesResolver(false)
  }
}

document.getElementById('editpositive').addEventListener('click', async function(e) {
  	if (radioState !== this.id) {
    	radioState = this.id
    	isNoBusy.then(() => window.requestAnimationFrame(increaseHeight))
    }
})
                
document.getElementById('editnegative').addEventListener('click', async function(e) {
  	if (radioState !==...