JSFiddle - React, Tailwind, and code Playground

by Aaron Kahlhamer

HTML

<div class="grid-wrapper grid-wrapper-985 unique-situation">
    <a class="d8x4">Simply Vera Wang</a>
</div>
    
<div class="grid-wrapper grid-wrapper-985 unique-situation">
    <a class="d8x4">Lee</a>
</div>

CSS

* {box-sizing:border-box;}

.grid-wrapper {font-size: 16px;position: relative;-webkit-box-sizing: content-box;-moz-box-sizing: content-box;box-sizing: content-box;}

.grid-wrapper-985 {width: 984px}

.d8x4 {background-color:salmon;float:left;height:200px;width:50%;}


/* Secret Sauce */

.unique-situation.grid-wrapper-985 {
    border-bottom:6px solid #b5b4b4;
    border-top:6px solid #b5b4b4;
    float:left;
    width:50%;
}

.unique-situation .d8x4 {
    width:100%;
}

.unique-situation + .unique-situation .d8x4 {
    background-color:blue; 
}