JSFiddle - React, Tailwind, and code Playground

by abhitalks

HTML

<span>Change width: </span>
<select id="wide">
    <option value="300">300</option>
    <option value="400">400</option>
    <option value="500" selected="selected">500</option>
    <option value="600">600</option>
</select>
<br /><br />
<div id='upper-menu-wrapper'>
<div id='upper-menu'>
    <ul>
        <li>About</li>
        <li>Parenting</li>
        <li>Receipes</li>
        <li>Devotional</li>
        <li>DIY Projects</li>
        <li>Home-making</li>
        <li>Pregnancy</li>
        <li>Frugal Living</li>
    </ul>
 </div>
</div>

CSS

#upper-menu-wrapper {
    width: 500px;
    border: 1px solid gray;
}
#upper-menu > ul {
    list-style-type: none;
    margin: 0px; padding: 0px;
    text-align: justify;
}
#upper-menu > ul > li {
    display: inline-block;
    text-align: left;
    padding: 0.25em; margin: 0.25em 0;
    white-space: no-wrap;
    background-color: silver;
    cursor: pointer;
}
#upper-menu > ul > li:hover {
    background-color: yellow;
}
#upper-menu > ul:after { content:''; display: inline-block; width: 100%; height: 0; }

JavaScript

$("#wide").on("change", function() {
    $("#upper-menu-wrapper").css("width", $(this).val() + 'px');
});