JSFiddle - React, Tailwind, and code Playground

HTML

<div class="office-row">
  <a href="#" class="office-title">Title</a>
  <div class="office">sadasd</div>
</div>
<div href="#" class="office-row">
  <a href="#" class="office-title">Title</a>
  <div class="office">sadasd</div>
</div>
<div class="office-row">
  <a href="#" class="office-title">Title</a>
  <div class="office">sadasd</div>
</div>

CSS

.office {
  max-height: 0px;
  overflow: hidden;
  transition: max-height .5s ease-out;
}

.office-title:focus + .office {
  max-height: 50px;
}