JSFiddle - React, Tailwind, and code Playground

HTML

<div id="spacer">
<div id="wrapper">
<div id="item1" class="menuitem">text123341</div>
<div id="item2" class="menuitem">text223</div>
<div id="item3" class="menuitem">text32341</div>
</div>
<div id="content">
<div id="container1"><div id="text1">Lorem ipsum dolor sit amet</div></div>
<div id="container2"><div id="text2">consectetur adipiscing elit</div></div>
<div id="container3"><div id="text3">Vestibulum pellentesque rutrum tellus Vestibulum pellentesque rutrum tellus Vestibulum pellentesque rutrum tellus</div></div>
</div>
</div>

CSS

#spacer
{
margin-top: 5%;
margin-left: 5%;
margin-right: 5%;
width: 90%;
display: inline-block;
vertical-align: top;
height: auto;
background: transparent;
z-index: -1;
}
#wrapper
{
display: table;
width: 100%;
border-spacing: 1px 0px;
border-collapse: collapse;
}
#spacer .menuitem
{
display: table-cell;
height: 1em;
padding: 1px;
}
#content
{
clear: both;
position: relative;
}
#container1
{
display: block;
vertical-align: top;
height: 0px;
overflow: visible;
width: 100%;
}
#text1
{
display: block;
background: blue;
}
#item1
{
background: blue;
}
#container2
{
display: block;
vertical-align: top;
height: 0px;
overflow: hidden;
width: 100%;
}
#text2
{
display: block;
background: green;
}
#item2
{
background: green;
}
#container3
{
display: block;
vertical-align: top;
height: 0px;
overflow: hidden;
width: 100%;
}
#text3
{
display: block;
background: red;
}
#item3
{
background: red;
}