JSFiddle - React, Tailwind, and code Playground

by Neo Aptt

HTML

<style id="style"></style>
<div class="wrapper">
    <ul>
        <li class="break"><a href="#">Link1</a>

        </li>
        <li class="break"><a href="#">Link</a>

        </li>
        <li><a href="#">Link2222</a>

        </li>
        <li class="button"><a href="#">Do Your Homework</a>

        </li>
    </ul>
    <ul class="pull-right">
        <li><a class="small" href="#">My Homework</a>

        </li>
        <li><a class="small" href="#">Homework Login</a>

        </li>
    </ul>
</div>

CSS

ul {
    display:inline-block;
    list-style:none;
    font-family:"Fauna One", Helvetica, sans-serif;
}
ul li {
    padding:10px;
    display:inline-block;
}
a {
    text-decoration:none;
    color:purple;
}
a:active {
    color:red;
}
.small {
    font-size:0.750em;
}
.button {
    background-color:#000;
    border-radius:3px;
}
.break {
    box-sizing: border-box;
    border-right:2px solid black;
}
.wrapper {
    /*Sets a scroll bar on the div when reaches minimal width*/
    overflow-x:auto;
    /*aligns UL elements center*/
    text-align:center;
    /*Makes sure that no element wraps to next line*/
    white-space:nowrap;
}
.pull-right{
    float:right;
}

JavaScript

//Creates a media query to make sure that no float will wrap
var navWidth = 0;
var buffer = 50;
//grabs the width of the all the ul elements
$('ul').each(function(){
    navWidth += $(this).width() + buffer;
});
//sets a media query to turn off float at the max width of the nav bar.
$('#style').html("@media (max-width:"+navWidth+"px) { .pull-right{ float: none; }}");