JSFiddle - React, Tailwind, and code Playground

HTML

<span class="span3"  tabindex="0">Short</span>
<span class="span2"  tabindex="0">Detailed</span>
<p class="alert" >This is hidden</p>

CSS

body {
  display: block;
}
.span3:focus ~ .alert {
  display: none;
}
.span2:focus ~ .alert {
  display: block;
}
.alert{display:none;}