JSFiddle - React, Tailwind, and code Playground

HTML

<div class="order_type">
            <button class="btn selected_bill">Наличными курьеру</button>
            <button class="btn online">Онлайн на сайте
            <div class="inp">
            купюра с коротой
нужна сдача
           
            </div>
            </button>
            </div>

CSS

.btn {
  border: 1px solid #bfbfbf;
  border-radius: 19.5px;
  font-style: normal;
  font-weight: 300;
  font-size: 12px;
  text-align: center;
  letter-spacing: 0.05em;
  color: #000000;
  background-color: #fff;
  width: 180px;
  height: 40px;
  cursor: pointer;
  position: relative;
  z-index:2;
}

.selected_bill {
  background: #ea2a2a;
  border: 1px solid #ea2a2a;
  color: #ffffff;
}

.inp{
  display:none;
  position: absolute;
  bottom:0;
  z-index:1;
  width:135px;
  height: 35px;
  border: 1px solid #ea2a2a;
  border-radius:0 0 19px 19px;
  top: 38px;
  left: 17px;
  color: #434343;
  text-align:center;
}

#inp_m{
  width: 100px;
  height: 22px;
  margin-top: 5px;
}

JavaScript

let buttons = document.querySelectorAll('.btn');
let input_holder = document.querySelector('.inp');


input_holder.addEventListener('click',()=>{
	 input_holder.innerHTML = `<input type="text" id="inp_m">`;
});


buttons.forEach(button =>{
		button.addEventListener('click',()=>{
    		buttons.forEach(b =>{
        		b.classList.remove('selected_bill');
        });
        button.classList.add('selected_bill');
   			if(button.classList.contains('online')){
            input_holder.style.display = "block";
        }else{
        			input_holder.style.display = "none";
              input_holder.innerHTML = "купюра с коротой нужна сдача";
        }
    });
});