JSFiddle - React, Tailwind, and code Playground

HTML

<div class="box">

  <div class="center-divider"> </div>

  <div class="arrow-wrapper">
   <div class="arrow-divider"></div>  
  </div>

</div>

CSS

.box{
  position:relative;
  background:orange;
  width:100%;
  height:50px;
  text-align:center;
  line-height:50px;
}

.arrow-wrapper{
  display:inline-block;
}

.center-divider{
  position:absolute;
  width:6px;height:100%;
  background:red;
  left:0;right:0;
  margin:auto;
}
.arrow-divider{
  height:12px;
  width:12px;
  margin-left:-6px;
  transform:rotate(-45deg);
  border-right:2px solid black;
  border-bottom:2px solid black;
}