JSFiddle - React, Tailwind, and code Playground

HTML

<div class="container">
                        <div class="footer">
                            <div class="row menu">
                                <div class="col-md-6">
                                    <ul class="left-side footer-menu">
                                        <li class="right-spacer left-remove">FEATURES</li>
                                        <li class="right-spacer">BLOG</li>
                                        <li class="right-spacer">ABOUT</li>
                                        <li class="right-spacer">CONTACT</li>
                                    </ul>
                                </div>
                                <div class="col-md-6">
                                    <ul class="right-side footer-menu">
                                        <li class="left-spacer">PRIVACY</li>
                                        <li class="left-spacer">TERMS</li>
                                        <li class="left-spacer">VIDEO</li>
                                        <li class="left-spacer">SLIDE SHARE</li>
                                    </ul>
                                </div>
                            </div>
                        </div>
                    </div>

CSS

.footer {
    width: 100%;
    border-top: 4px solid #d3d3d3;
}
.footer .menu {
    font-size: 15px;
}
.footer .footer-menu li {
    list-style-type: none;
    display: inline;
}
.footer .left-side li {
    float: left;
}
.footer .right-side li {
    float: right;
}
.left-spacer {
    padding-left: 58px;
}
.right-spacer {
    padding-right: 58px;
}