JSFiddle - React, Tailwind, and code Playground

HTML

<div style="width:200px;height:200px;background:#000000;margin:10px">
    <div class="bottom">
        <div class="bottom_l">
        </div>
        <div class="arrow">
        </div>
        <div class="bottom_r">
        </div>
    </div>
</div>

CSS

.bottom {
    position: relative;
    background: #00cc00;
    height: 1px;
    width: auto;
    margin-left: 3px;
    margin-right:16px;
}
.bottom .bottom_l{
    float:left;
    background: #5555cc;
    width:50%;
    height:8px;
}
.bottom .arrow{
    float:left;
    background: #cc0000;
    width: 13px;
    height:8px;
}
.bottom .bottom_r {
    position: absolute;
    top:0px;
    left:50%;
    background: #aa00aa;
    width:50%;
    height:8px;
    margin-left: 13px;
    
}