JSFiddle - React, Tailwind, and code Playground

HTML

<div class="address">
  <input type="text" name="open_list" id="open_list">
  <div class="list">
    <label class="open" for="open_list"></label>
    <input type="radio" name="address" id="address1" checked>
    <div class="item">
      <label class="choice" for="address1">ул.Софийская,д.8</label>
      <span class="tel">+7 (812) 999-99-99</span>
    </div>
    <input type="radio" name="address" id="address2">
    <div class="item">
      <label class="choice" for="address2">Лиговский пр-т,д.246</label>
      <span class="tel">+7 (812) 888-88-88</span>
    </div>
  </div>
</div>
<div>text</div>

CSS

html,body{margin:0;background:#fff;}
.address{
  display:inline-block;
  height:1.5em;
}
.address input{
  width:0;
  height:0;
  margin:0;
  padding:0;
  border:0;
  position:absolute;
}
.address input:focus + .list{
  overflow:hidden;
  height:100vh;
  transition:all 0.2s ease-out 0.1s;
}
.address input:focus + .list .item{
  max-height:1.5em;
  transition:all 0.2s ease-out 0.1s;
}
.address input:focus + .list .open{
  top:100%;
  left:100%;
  transition:all 0.2s ease-out 0.1s;
}
.address input:focus + .list .tel{
  padding:0;
  max-width:0;
  transition:all 0.1s ease-out 0.0s;
}
.address input:checked + .item{
  max-height:1.5em;
  
}
.list{
  display:flex;
  flex-direction:column;
  height:100%;
  position:relative;
  transition:all 0.2s ease-out 0.1s;
}
.item{
  display:flex;
  flex-direction:row;
  overflow:hidden;
  background:#fff;
  max-height:0px;
  transition:all 0.2s ease-out 0.1s;
}
.open{
  top:0;
  left:0;
  right:0;
  bottom:0;
  position:absolute;
  z-index:10;
  transition:all 0.2s ease-out 0.1s;
}
.choice{
  flex-grow:1;
  padding:2px;
}
.tel{
  flex-grow:0;
  padding:2px;
  max-width:100%;
  transition:all 0.2s ease-out 0.3s;
}