<div class="slider">
  <div class="slider__column slider__column--left">
    <div class="slider__item">Lorem ipsum</div>
    <div class="slider__item">Repellat eveniet commodi odio quasi</div>
    <div class="slider__item">Deserunt, veniam temporibus a in</div>
    <div class="slider__item">Fugiat, eveniet</div>
    <div class="slider__item">Eos est ipsam sint eius</div>
  </div>

  <div class="slider__column slider__column--picture">
    <svg viewBox="0 0 100 100">
      <defs>
        <mask id="mask" x="0" y="0" width="100%" height="100%">
          <image x="0" y="0" width="100%" height="100%" preserveAspectRatio="xMidYMid meet" href="https://habrastorage.org/webt/6f/oy/sb/6foysbnl5xdg0ng88isdyvilm_y.png"/>
        </mask>
      </defs>
      <image x="0" y="0" width="100%" height="100%" mask="url(#mask)" preserveAspectRatio="xMidYMid slice" href="https://images.unsplash.com/photo-1552933529-e359b2477252?ixlib=rb-1.2.1&amp;ixid=eyJhcHBfaWQiOjEyMDd9&amp;auto=format&amp;fit=crop&amp;w=750&amp;q=80" />
    </svg>
  </div>

  <div class="slider__column slider__column--right">
    <div class="slider__item">Eos est ipsam sint eius</div>
    <div class="slider__item">Repellat eveniet commodi odio quasi</div>
    <div class="slider__item">Lorem ipsum</div>
    <div class="slider__item">Deserunt, veniam temporibus a in</div>
    <div class="slider__item">Fugiat, eveniet</div>
  </div>
</div>

* {
  box-sizing: border-box;
}

.slider {
  display: flex;
}

.slider__column {
  flex: 1;
  display: flex;
  flex-direction: column;
  justify-content: center;
}

.slider__column--left {
  align-items: flex-end;
  text-align: right;
  position: relative;
  z-index: 1;
}

.slider__column--right {
  align-items: flex-start;
  text-align: left;
}

.slider__column--picture {
  margin: 0 10px;
}

.slider__item {
  padding: 15px;
  background-color: deepskyblue;
  margin: 5px 0;
  border-radius: 15px;
}

const circleEl = document.querySelector('.slider__column--picture svg');
const leftItems = [...document.querySelectorAll('.slider__column--left > .slider__item')];
const rightItems = [...document.querySelectorAll('.slider__column--right > .slider__item')];
const rOffset = 20;

window.addEventListener('resize', () => {
  const circleElRect = circleEl.getBoundingClientRect();
  const r2 = Math.pow(circleElRect.width / 2 + rOffset, 2);
  const cx = circleElRect.left + circleElRect.width / 2;
  const cy = circleElRect.top + circleElRect.height / 2;

  for (const item of leftItems) {
    item.style.marginRight = '0px';
    const itemRect = item.getBoundingClientRect();
    const ix = itemRect.left + itemRect.width;
    const iy = itemRect.top + itemRect.height / 2;
    const x = -Math.sqrt(r2 - Math.pow(iy - cy, 2)) + cx;
    const margin = Number.isNaN(x) ? ix - cx + rOffset : ix - x;
    item.style.marginRight = `${margin}px`;
  }
  
  for (const item of rightItems) {
    item.style.marginLeft = '0px';
    const itemRect = item.getBoundingClientRect();
    const ix = itemRect.left;
    const iy = itemRect.top + itemRect.height / 2;
    const x = Math.sqrt(r2 - Math.pow(iy - cy, 2)) + cx;
    const margin = Number.isNaN(x) ? cx - ix + rOffset : x - ix;
    item.style.marginLeft = `${margin}px`;
  }
});

window.dispatchEvent(new Event('resize'));