css html simple chart layer

<style>
.block{
  width:80pt;
  height:60pt;
  border:3pt solid #5d5;
  border-radius:8%;
}
.r-arrow-out{
}
.r-arrow{
  /*display:inline-block;
  vertical-align:middle;*/

  border-top:1pt solid #3c3;
  width:30pt;
  height:0pt;
  position:relative;
  margin:2pt;
}
.r-arrow::after{
  content:"";
  width: 5pt;
  height:5pt;
  position:absolute;
  border-top:2pt solid #3c3;
  border-right: 2pt solid #3c3;
  transform:rotate(45deg);
  right:0pt;top: -4pt;
}
</style>

<div style="display:flex;width:640pt;height:200pt;  
  justify-content: center; 
  align-items: center;">
  <div class="block" style="">
       AAAA
  </div>
  <div class="r-arrow"></div>
  <div class="block">
    BBB
  </div>
  <div class="r-arrow"></div>
  <div class="block" style=";width:340pt;height:100pt; 
  padding:5pt;border:3pt dashed gray;">
    CCC
  <div style="display:flex;align-items: center;">
    <div class="block">
       xxxx
    </div>
    <div class="r-arrow"></div>
    <div class="block">
       yyy
    </div>
    <div class="r-arrow"></div>
    <div class="block">
      zzz
    </div>
  </div></div>
  <div class="r-arrow"></div>
  <div class="block" style="">
    DDD
  </div>
</div>