JSFiddle - React, Tailwind, and code Playground

HTML

<div id="b">B</div>
<div id="a">A</div>

CSS

body {
  padding:10px;
}

/** the common design of the items. */
#a, #b {
  border:1px solid black;
  display:inline-block;
  height:100px;
  line-height:100px;
  position:relative;
  text-align:center; 
  vertical-align:middle;
}

/** the design of item A (cicle). */
#a {
  background:grey;
  border-radius:50%;
  width:100px;
  z-index:1;
}

/** the design of item B (cut out). */
#b { 
  width: 200px;
  
  /** the gap between item  A and B. */
  margin:0 -20px 0 0;
  padding:0 40px 0 0;
  
  /** the real border. */
  -webkit-border-radius:20px 0 0 20px;
  -moz-border-radius:20px 0 0 20px;
  border-radius:20px 0 0 20px;
  border-width:1px 0 1px 1px;
  
  /** the cut out on the right side. */
  background-image: -moz-radial-gradient(calc(100% + 23px) 50%, circle closest-corner, rgba(0, 0, 0, 0) 0, rgba(0, 0, 0, 0) 55px, black 56px, grey 57px);
  background-image: -webkit-radial-gradient(calc(100% + 23px) 50%, circle closest-corner, rgba(0, 0, 0, 0) 0, rgba(0, 0, 0, 0) 55px, black 56px, grey 57px);
  background-image: -ms-radial-gradient(calc(100% + 23px) 50%, circle closest-corner, rgba(0, 0, 0, 0) 0, rgba(0, 0, 0, 0) 55px, black 56px, grey 57px);
  background-image: -o-radial-gradient(calc(100% + 23px) 50%, circle closest-corner, rgba(0, 0, 0, 0) 0, rgba(0, 0, 0, 0) 55px, black 56px, grey 57px);
  background-image: radial-gradient(calc(100% + 83px) 50%, circle closest-corner, rgba(0, 0, 0, 0) 0, rgba(0, 0, 0, 0) 55px, black 56px, grey 57px);
}