JSFiddle - React, Tailwind, and code Playground

HTML

<div id="sticky-bar" class="cf">
    <div id="c1">col 1</div>
    <div id="c2">col 2</div>
    <div id="c3">
        <span class="incredibly-long-txt">So many text so many text so many text so many text so many text so many text so many text so many text so many text so many text so many text so many text so many text so many text so many text so many tex</span>
    </div>
    <div id="c4">
        <ul class="mmenu">
            <li> 
                <a href="#" class="show-sub">m1</a>
                <ul class="smenu">
                    <li> 
                        <a href="#">a1</a>
                    </li><li> 
                        <a href="#">a2</a>
                    </li><li> 
                        <a href="#">a3</a>
                    </li><li> 
                        <a href="#">a4</a>
                    </li>
                </ul>
            </li>
            <li> 
                <a href="#" class="show-sub">m2</a>
                <ul class="smenu">
                    <li> 
                        <a href="#">b1</a>
                    </li><li> 
                        <a href="#">b2</a>
                    </li><li> 
                        <a href="#">b3</a>
                    </li><li> 
                        <a href="#">b4</a>
                    </li>
                </ul>
            </li>
            <li> 
                <a href="#" class="show-sub">m3</a>
                <ul class="smenu">
                    <li> 
                        <a href="#">c1</a>
                    </li><li> 
                        <a href="#">c2</a>
                    </li><li> 
                        <a href="#">c3</a>
                    </li><li> 
                        <a href="#">c4</a>
                    </li>
                </ul>
            </li>
        </ul>
    </div>
</div>

CSS

*, *:before, *:after {
    box-sizing: border-box;
}
ul, li {
    margin: 0;
    padding:0;
    list-style:none;
}
a {
    color: #fff;
}
.cf:before, .cf:after {
    content:'';
    display: table;
}
.cf:after {
    clear:both;
}
.cf {
    *zoom: 1;
}
#sticky-bar {
    color: #fff;
    font-family: Arial, Helvetica, sans-serif;
    font-size: 12px;
    display: block;
    width: 100%;
    height: 30px;
    background: #582A72;
    position: relative;
    display: table;
}

#sticky-bar > div {
    display: table-cell;
}
#c1 {
    width: 100px;
    height: 100%;
    background: #9775AA;
    padding: 6px;
}
#c2 {
    width: 150px;
    height: 100%;
    background: #764B8E;
    padding: 6px;
}
#c3 {
    height: 100%;
    background: #3D1255;
    padding: 6px;
}
#c4 {
    background: #260339;
    position: absolute;
    right:0;
    top:0;
}
.mmenu {
    display:block;    
}
.mmenu li {
    float:left;
    width: 30px;
    height: 30px;
    text-align: center;
    border-left: 1px solid #fff;
    background: #887CAF;
}
.mmenu li a {
    display: block;
    width: 100%;
    height: 100%;
    padding: 6px 0;
    position: relative;
}
.smenu {
    display: none; 
    background: #403075;
    position: absolute;
    top: 100%;
    right: 0;
   
}
.smenu li {
    background: #882D61;
}
.show-sub:hover  + .smenu {
    display: block;
}
.incredibly-long-txt {
    display:inline-block;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}