JSFiddle - React, Tailwind, and code Playground

HTML

<div class="container">
            <div class="col flank">Box one</div> 
            <div class="col center">_<div class="a1"></div><div class="a2"></div><div class="b1"></div><div class="b2"></div></div> 
            <div class="col flank">Box two</div> 
</div>

CSS

.container {
 height: 36px;
 white-space:nowrap;
 padding-right:126px;
 font-size: 0;
 background:grey;
}
.col{
    display:inline-block;
    text-align: center;
    width:50%;
    margin-right:0px;
    height:36px;
}
.flank{
    background:#fff;   
    height:31px;
}
.center{
    display:inline-block;
    width:126px;
}
.a1{
   float: left;
   background-color: #fff;
   width: 50px;
   height: 50px;
   border-bottom-right-radius: 100% 100%;
   border-bottom:10px solid #fff;
   border-right:10px solid transparent;
   -webkit-box-sizing: border-box;
   -moz-box-sizing: border-box;
   box-sizing: border-box;
   margin-top: -19px;
}

.a2{
   margin-top: -5px;
   float: left;
   width: 50px;
   height: 50px;
   margin-left: -37px;//13-50
   background-color: transparent;
   border-top-left-radius: 100% 100%;
   border-top:10px solid #fff;
   border-left:10px solid transparent;
   -webkit-box-sizing: border-box;
   -moz-box-sizing: border-box;
   box-sizing: border-box;
}

.b2{
   float: left;
   background-color: #fff;
   width: 50px;
   height: 50px;
   border-bottom-left-radius: 100% 100%;
   border-bottom:10px solid #fff;
   border-left:10px solid transparent;
   -webkit-box-sizing: border-box;
   -moz-box-sizing: border-box;
   box-sizing: border-box;
   margin-top: -19px;
   margin-left: -37px;
}

.b1{
   margin-top: -5px;
   float: left;
   width: 50px;
   height: 50px;
   margin-left: 0px; //+50
   background-color: #fff;
   border-top-right-radius: 100% 100%;
   border-top:10px solid #fff;
   border-right:10px solid transparent;
   -webkit-box-sizing: border-box;
   -moz-box-sizing: border-box; 
   box-sizing: border-box;
}