JSFiddle - React, Tailwind, and code Playground

HTML

<div class="state">      
    <span>CA</span>
    <span class="state-full">LIFORNIA</span> 
</div>

<div class="state">      
    <span>WY</span>
    <span class="state-full">OMING</span>
</div>

CSS

.state, .state-full { cursor: pointer; }

.state-full { display: none; }

.state span { float: left; }
div { overflow: hidden; }

JavaScript

$('.state').hover(function() {
    $('.state-full', $(this)).slideToggle(100, 'linear').display(100, 'linear');
});