Responsive Curve line between elements - html

Question

I'm currently working on a project that has two columns with text, headings and buttons. I would like to keep the design responsive, but when our client adds more text to "Step 3" the SVG doesn't line up correctly.
My thoughts
I would like to remove the SVG and set "anchor" points to the paragraph text boxes and create a curved dotted line between those anchor points.
The question is:
How do I achieve this?
Click to view image
I tried to use an SVG and scale it with the content, but this didn't work as expected.
After watching different solutions on forums, I didn't succeed in finding a solution.
This is the structure of the bock seen on the screenshot.
I am using Tailwindcss for my styling.
<section class="container mx-auto background mb-52">
<div class="flex flex-row">
<div class="flex flex-col justify-center relative max-w-[534px]">
<img class=" max-w-[534px] max-h-[575px]" src="https://via.placeholder.com/534x575.png" alt="">
</div>
<div class="ml-28 flex flex-row">
<div class="max-w-[315px]">
<!-- Item 1 -->
<div class="text-left p-3">
<div class="">
<h1 class="text-xl py-2"><span class="font-bold">1. </span>TITLE</h1>
<p class="font-roboto font-light">
text
</p>
</div>
<div class="py-4 flex flex-wrap">
Online strategie
Vindbaarheid
Webdesign
</div>
</div>
<!-- Item 3 -->
<div class="text-left p-3 ">
<div class="">
<h1 class="text-xl py-2"><span class="font-bold">3. </span>TITLE</h1>
<p class="font-roboto font-light">
Text
</p>
</div>
<div class="py-4 flex flex-wrap">
Klantportalen
</div>
</div>
<!-- Item 5 -->
<div class="text-left p-3 ">
<div class="">
<h1 class="text-xl py-2"><span class="font-bold">5. </span>TITLE</h1>
<p class="font-roboto font-light">
Text
</p>
</div>
<div class="py-4 flex flex-wrap">
Conversie optimalisatie
</div>
</div>
</div>
<!-- Col IMG -->
<div class="my-auto max-h-[764px] max-w-[100px] flex flex-col justify-center">
<img class="w-full" src="{{ asset('storage/images/curvy-line.svg') }}" alt="">
</div>
<div class="my-auto max-w-[315px]">
<!-- Item 2 -->
<div class="text-left p-3 ">
<div class="">
<h1 class="text-xl py-2"><span class="font-bold">2. </span>TITLE</h1>
<p class="font-roboto font-light">
Text
</p>
</div>
<div class="py-4 flex flex-wrap">
Koppelingen
E-Commerce
Productconfiguratoren
</div>
</div>
<!-- Item 4 -->
<div class="text-left p-3 ">
<div class="">
<h1 class="text-xl py-2"><span class="font-bold">4. </span>TITLE</h1>
<p class="font-roboto font-light">
Text
</p>
</div>
<div class="py-4 flex flex-wrap">
Bedrijfapps
Dashboarding
</div>
</div>
</div>
</div>
</div>
</section>