JSFiddle - React, Tailwind, and code Playground

HTML

<body>
    <ul>
        <li>
            <div class="container">
                <div class="div1">
                    <a href="/a" class="one">a</a>
                    <a href="/b" class="two">b</a>
                    <a href="/c" class="three">c</a>
                </div>
                <div class="div2">X</div>
                <div style="clear:both;"></div>
            </div>
        </li>
    </ul>
</body>

CSS

li 
{
    width:100%;
}
li a.one
{
    float:left;
    background:red;
}
li a.two
{
    float:left;
    background:pink;
}

li a.three
{
    float: left;
    background:green;
}
.container
{
    background: green;
    width: 100%;
}
.div2
{
    float: right;
    
}