JSFiddle - React, Tailwind, and code Playground

HTML

<div id="news-tab" class="tab-pane">
    <div class="col-xs-12 col-sm-6 col-md-4 col-lg-3">
        <div class="news-tab-item-wrapper"> <span>This is News Title</span>
 <a href="#">Read More</a>

        </div>
    </div>
    <div class="col-xs-12 col-sm-6 col-md-4 col-lg-3">
        <div class="news-tab-item-wrapper"> <span>This is News Title</span>
 <a href="#">Read More</a>

        </div>
    </div>
    <div class="col-xs-12 col-sm-6 col-md-4 col-lg-3">
        <div class="news-tab-item-wrapper"> <span>This is News Title</span>
 <a href="#">Read More</a>

        </div>
    </div>
    <div class="col-xs-12 col-sm-6 col-md-4 col-lg-3">
        <div class="news-tab-item-wrapper"> <span>This is News Title</span>
 <a href="#">Read More</a>

        </div>
    </div>
</div>

CSS

@media(min-width:600px) {
 .tab-pane > div:nth-child(odd) > .news-tab-item-wrapper{
        border-right:2px solid #fff;
        background:red;
    }
}