JSFiddle - React, Tailwind, and code Playground

HTML

<nav>
    <a href="#" class="constrained">Hello, I would like to now your name plase</a>
    <a href="#" class="constrained">Lorem ipsum dolor sit amet</a>
    <a href="#" class="constrained">A 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;
-moz-transition: height 1s ease;
}

nav a:hover {
  height: auto;
}