How to make the <dash> automatically increase the height with respect to <text> and <subtext> like in mobile device ?

Also, how to fit the content of <text> and <subtext> to the <wrapper> class ? Right now, it horizontally overflows and breaks it. The code right now is non-responsive in essence. I’ve tried using width with fixed px but it’s too troublesome to accomodate all devices.

.main .circle{
    border-radius: 50%;
    width: 36px;
    height: 36px;
    padding: 8px;
    text-align: center;
    font-size: 1.7em;
    color: white;
    /* display: inline-block; */
    border: black 2px solid;
}

.main .one{ 
    background: #BDB3FF;
     /* display: inline-block; */
     
 }
.main .two{
    background: #6F42C1;
    /* display: inline-block; */
}

.main .three{
    background:#413687;
}


.main .wrapper{
    border: black 2px solid;
    /* display: inline-block;  */
}

.main .dash {
    --s:15px; /*control the space between dashes */
    border: black 2px solid;
    position: relative;
    left: 25px;
    --s:15px;
    height: 6px;
    width: 6px;
    height: 180px; 
    /* display: inline-block;  */
     background: 
     radial-gradient(circle closest-side,#BDB3FF 98%,#0000) 0 0/100% var(--s),
     linear-gradient(#BDB3FF 50%, #0000 0) 0 calc(var(--s)/2)/100% calc(2*var(--s));
  }

.main .dash_one{
     background: 
     radial-gradient(circle closest-side,#BDB3FF 98%,#0000) 0 0/100% var(--s),
     linear-gradient(#BDB3FF 50%, #0000 0) 0 calc(var(--s)/2)/100% calc(2*var(--s));
}

.main .dash_two{
     background: 
     radial-gradient(circle closest-side,#6F42C1 98%,#0000) 0 0/100% var(--s),
     linear-gradient(#6F42C1 50%, #0000 0) 0 calc(var(--s)/2)/100% calc(2*var(--s)); 
     height: 220px;
    
}

.main .dash_three{
    height:250px;
}
  

.main .subtext{
    width:650px;
    border: black 2px solid;
    display: inline-block;
    font-size: 2em;
    position: relative;
    left: 20px;
}

.main .text{
    width: max-content;
    color: black;
    display: inline-block;
    position: relative;
    left: 50px;
    bottom: 30px;
}
<div class="main">
    <div class="wrapper">
        <div class="circle one">1 <span class="text">Post Your Question</span></div>
        <div class="dash dash_one">
            <span class="subtext">Just attach your assignment/question along with the reference materials or any specific guideline/requirement. select your deadline and submit it to get assignment help
            </span>
        </div>
        <div class="circle two">2 <span class="text">Pay To Get Assignment Help</span></div>
        <div class="dash dash_two">
            <span class="subtext">Our team will contact you once we recieve your request with the quoted price for your assignment help on email/whatsapp. you will have to pay us to do your assignment. Next, we will assign an expert to do your assignment
            </span>
        </div>
        <div class="circle three">3 <span class="text">Get Assignment Solution</span</div>
        <div class="dash_three">
            <span class="subtext">Our team will contact you once we recieve your request with the quoted price for your assignment help on email/whatsapp. you will have to pay us to do your assignment. Next, we will assign an expert to do your assignment
            </span>
        </div> 
    </div>
</div>

2

One way is to use flex boxes and don’t use pixel sizes

.main
{
  --circle-size: 2em;
  font-family: arial;
  font-size: 1.5em;
}
.main .circle{
    border-radius: 50%;
    min-width: var(--circle-size);
    height: var(--circle-size);
    line-height: var(--circle-size);
    text-align: center;
    font-weight: bold;
    color: white;
    /* display: inline-block; */
    /*border: black 2px solid;*/
}

.main .one{ 
    background: #BDB3FF;
     /* display: inline-block; */
     
 }
.main .two{
    background: #6F42C1;
    /* display: inline-block; */
}

.main .three{
    background:#413687;
}


.main .wrapper{
    /* border: black 2px solid; */
    /* display: inline-block;  */
}

.main .dash  /* changed */
{
  display: flex;
}
.main .dashes { /* new */ 
    --s:15px; /*control the space between dashes */
    /* border: black 2px solid; */
    --s:15px;
    --dash-width: 6px;
    min-width: var(--dash-width);
    /* display: inline-block;  */
     background: 
     radial-gradient(circle closest-side,#BDB3FF 98%,#0000) 0 0/100% var(--s),
     linear-gradient(#BDB3FF 50%, #0000 0) 0 calc(var(--s)/2)/100% calc(2*var(--s));
 /* added */
     display: inline-block;
     margin: 0 calc((var(--circle-size) - var(--dash-width)) / 2);
     vertical-align: top;
  }
.main .dash_three > .dashes
{
  border: 0;
  background: 0;
}
.main .dash_one{
     background: 
     radial-gradient(circle closest-side,#BDB3FF 98%,#0000) 0 0/100% var(--s),
     linear-gradient(#BDB3FF 50%, #0000 0) 0 calc(var(--s)/2)/100% calc(2*var(--s));
}

.main .dash_two{
     background: 
     radial-gradient(circle closest-side,#6F42C1 98%,#0000) 0 0/100% var(--s),
     linear-gradient(#6F42C1 50%, #0000 0) 0 calc(var(--s)/2)/100% calc(2*var(--s)); 
/*     height: 220px;*/
    
}

/*
.main .dash_three{
    height:250px;
}
*/
.main .subtext{
    /* border: black 2px solid; */
    display: inline-block;
    margin: 0.5em 0 1em 0.5em;
/* removed */
/* 
    width:650px;
    position: relative; 
    left: 20px;
*/
}

.main .text{
/*    width: max-content; */
    color: black;
    display: inline-block;
    font-weight: bold;
    margin: 0 0 0 0.5em;
/*
    position: relative;
    left: 50px;
    bottom: 30px;
*/
}

.main .headline
{
  display: flex;
  align-items: center;
}
<div class="main">
    <div class="wrapper">
        <div class="headline">
          <div class="circle one">1</div>
          <span class="text">Post Your Question</span>
        </div>
        <div class="dash dash_on">
            <span class="dashes"></span>
            <span class="subtext">Just attach your assignment/question along with the reference materials or any specific guideline/requirement. select your deadline and submit it to get assignment help
            </span>
        </div>
        <div class="headline">
          <div class="circle two">2</div>
          <span class="text">Pay To Get Assignment Help</span>
        </div>
        <div class="dash dash_two">
            <span class="dashes"></span>
            <span class="subtext">Our team will contact you once we recieve your request with the quoted price for your assignment help on email/whatsapp. you will have to pay us to do your assignment. Next, we will assign an expert to do your assignment
            </span>
        </div>
        <div class="headline">
          <div class="circle three">3</div>
          <span class="text">Get Assignment Solution</span>
        </div>
        <div class="dash dash_three">
            <span class="dashes"></span>
            <span class="subtext">Our team will contact you once we recieve your request with the quoted price for your assignment help on email/whatsapp. you will have to pay us to do your assignment. Next, we will assign an expert to do your assignment
            </span>
        </div> 
    </div>
</div>

Not the answer you’re looking for? Browse other questions tagged css or ask your own question.