JSFiddle - React, Tailwind, and code Playground

by Sebastian Brosch

HTML

<div class="item-align-right">
  <div id="a">A</div>
  <div id="b">B</div>
</div>
<div class="item-align-left">
  <div id="a">A</div>
  <div id="b">B</div>
</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 alignment of the items. */
.item-align-left, .item-align-right {
  display:flex;
  margin-bottom:10px;
}
.item-align-left #a, .item-align-right #b { 
  order:1;
}
.item-align-right #a, .item-align-left #b {
  order:2;
}

/** 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 right aligned item B (cut out on right side). */
.item-align-right #b {
  
  /** 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% + 23px) 50%, circle closest-corner, rgba(0, 0, 0, 0) 0, rgba(0, 0, 0, 0) 55px, black 56px, grey 57px);
}

/** the left aligned item B (cut out on left side). */
.item-align-left #b {
  
  /** the gap between item  A and B. */
  margin:0 0 0 -20px;
  padding:0 0 0 40px;
  
  /** the real border. */
  -webkit-border-radius:0...