JSFiddle - React, Tailwind, and code Playground

HTML

<div>
  <label class="label_select">
    Выберите
    <input class="triger" type="text" value="">
    <div>
      <label for="i1">1</label>
      <label for="i2">2</label>
    </div>
  </label>
  <div class="block">
    <input class="triger" type="radio" name="radio" id="i1">
    <div><input type="text" value="1"></div>
    <input class="triger" type="radio" name="radio" id="i2">
    <div><input type="text" value="2"></div>
  </div>
</div>

CSS

label>div{
  position:absolute;
  width:100%;
  max-height:0;
  background:#fff;
  overflow:hidden;
  z-index:1;
  transition:max-height 0.6s ease-out 0.1s;}
label>div>label{
  display:block;}
input:focus+div{
  max-height:100px;
  overflow:auto;
  transition:height 0.6s ease-out 0.1s;}
input:checked+div{
  height:auto;}

.label_select{
  position:relative;
  display:inline-block;
  width:100px;}
.triger{
  margin:0;
  padding:0;
  width:0;
  height:0;
  border:0;
  z-index:-1;}
.block{position:relative;height:0;}
.block>div{position:absolute;top:0;height:0;overflow:hidden;}