<label for="rtl"><input type="checkbox" id="rtl">Right to Left</label>
<div class="organogram">
  <div class="main cc"><span>executive</span></div>
  <div class="sub  tl"><span>no executive</span></div>
  <div class="sub  tc"><span>support executive</span></div>
  <div class="sub  tr"><span>some executive</span></div>
  <div class="sub  cl"><span>care executive</span></div>
  <div class="sub  cr"><span>talk executive</span></div>
  <div class="sub  bl"><span>customer executive</span></div>
  <div class="sub  bc"><span>bla executive</span></div>
  <div class="sub  br"><span>connect executive</span></div>
</div>
    
    

/* setup for demo */
* { box-sizing: border-box }
[outlines], [outlines] * { outline: 1px solid hotpink }
body { margin: 0; padding: 1rem; min-height: 100vh; display: grid; place-items: center; font-family: sans-serif}

/* direction change */
label { position: fixed; inset-block-start: 1rem; inset-inline-end: auto; inset-block-end: auto; inset-inline-start: 1rem; ; font-size: 0.9rem; z-index:1 }
body.rtl { direction: rtl }

/* organogram  */
.organogram{
  --grid-gap: 1rem; 
  display: grid;
  gap: var(--grid-gap);
  color: white;
  font-family: sans-serif;
  font-weight: 600;
}

.organogram>div{ 
  display: grid; 
  justify-content: start;
  align-items: center;
  position: relative;
}
.organogram>div>span{
  padding-block: 0.5rem;
  padding-inline: 1rem;
  border-radius: 0.5rem;
  background: linear-gradient(to right, #692FE2, #5360EA); 
}
.organogram>.main>span{
  aspect-ratio: 1;
  border-radius: 50%;
  display: grid;
  place-items: center;
}
.organogram>.sub{
  padding-inline-start: calc(var(--grid-gap) * 2);
}
/* lines */
.organogram>.sub::after{
  
  content: "";
  position: absolute;
  z-index: -1;
  width: calc(var(--grid-gap) * 2);
  height: calc(100% + var(--grid-gap));
  
  /* position */
  inset-block-start: auto;
  inset-inline-end: auto;
  inset-block-end: 50%;
  inset-inline-start: var(--grid-gap);
  
  /* border */
  --borderW: 2px;
  --borderR: 0.5rem;
  border-style: dashed;
  border-color: #5360EA;
  
  /* border-width */
  border-block-start-width: 0;
  border-inline-end-width: 0;
  border-block-end-width: var(--borderW);
  border-inline-start-width: var(--borderW);
 
  /* border-radius */
  border-end-start-radius: var(--borderR);
}

@media (min-width: 30rem){
  
  .organogram{
    grid-template-columns: repeat(3, 1fr);
    grid-template-areas: 'tl tc tr' 'cl cc cr' 'bl bc br';
    text-align: center;
  }
  .organogram>div{
    grid-area: var(--area);
    justify-content: center;
  }
  
  .organogram>.sub{ padding-inline-start: unset }
  .organogram>.sub>span { 
    padding-block: 1rem; 
    padding-inline: 2rem;
    border-radius: 1rem;
  }
  
  /* set up       |grid-area | position after element  |     border-width      | border-radius */       
  .organogram>.tl {--area: tl; --i-bs: 50%; --i-is: 50%; --bw-be: 1; --bw-is: 1; --br-es: 1}
  .organogram>.tc {--area: tc; --i-bs: 50%; --i-is: 50%; --bw-is: 1}
  .organogram>.tr {--area: tr; --i-bs: 50%; --i-ie: 50%; --bw-be: 1; --bw-ie: 1; --br-ee: 1}
  .organogram>.cl {--area: cl; --i-bs: 50%; --i-is: 50%; --bw-bs: 1}
  .organogram>.cc {--area: cc}
  .organogram>.cr {--area: cr; --i-bs: 50%; --i-ie: 50%; --bw-bs: 1}
  .organogram>.bl {--area: bl; --i-be: 50%; --i-is: 50%; --bw-bs: 1; --bw-is: 1; --br-ss: 1}
  .organogram>.bc {--area: bc; --i-be: 50%; --i-is: 50%; --bw-is: 1}
  .organogram>.br {--area: br; --i-be: 50%; --i-ie: 50%; --bw-bs: 1; --bw-ie: 1; --br-se: 1}
  
  .organogram>.sub::after{
    width: 100%;
    height: calc(50% + var(--grid-gap) * 1.5);
   
    /* position */
    inset-block-start: var(--i-bs, auto);
    inset-inline-end: var(--i-ie, auto);
    inset-block-end: bar(--i-be, auto);
    inset-inline-start: var(--i-is, auto);
    
    /* border-width*/
    border-block-start-width: calc(var(--borderW) * var(--bw-bs, 0));
    border-inline-end-width: calc(var(--borderW) * var(--bw-ie, 0));
    border-block-end-width: calc(var(--borderW) * var(--bw-be, 0));
    border-inline-start-width: calc(var(--borderW) * var(--bw-is, 0));
    
    /* border-radius */
    border-start-start-radius: calc(var(--borderR) * var(--br-ss, 0));
    border-start-end-radius: calc(var(--borderR) * var(--br-se, 0));
    border-end-end-radius: calc(var(--borderR) * var(--br-ee, 0));
    border-end-start-radius: calc(var(--borderR) * var(--br-es, 0));
  }

}

const checkbox = document.querySelector('#rtl');
checkbox.addEventListener("change", (e)=>{
  document.body.classList.toggle('rtl')
})