JSFiddle - React, Tailwind, and code Playground

by duopixel

HTML

<nav>
    <a href="#">Hello, I would like to now your name plase</a>
    <a href="#">Lorem ipsum dolor sit amet</a>
    <a href="#">A shorter text</a>
</nav>
<article>
    Some content
</article>

CSS

article, nav {
display: block;
clear: both;
}

article {
background-color: #333;
min-height: 100px;
color: #999;
padding: 10px;
}

nav a {
width: 100px;
overflow: hidden;
display: block;
float: left;
background-color: #c00;
height: 1em;
color: #fff;
text-decoration: none;
margin-right: 10px;
padding: 5px 10px;
-webkit-transition: height 1s ease;
}

.constrained {
 height: 1em;
}

JavaScript

$("nav a").each(function(){
  $(this).data('height', $(this).innerHeight()); //capture the height
  $(this).addClass("constrained");
});