I am having trouble formatting the "How it works" section on my website. When the text is too long, the numbers on the left side grow alongside it as shown in number 4.
Is there a way to keep the numbers fixed on the left while allowing the text to expand freely on the right without affecting the numbering? Thank you!
.uli {
list-style: none;
float: left;
width: 100%;
padding: 0;
}
.uli li {
padding-bottom: 80px;
float: left;
width: 100%;
position: relative;
}
.uli li span {
border-radius: 50%;
border: 1px solid #eaeaea;
width: 100px;
height: 100px;
line-height: 30px;
margin-right: 10px;
background-color: #eaeaea;
display: inline-block;
position: relative;
text-align: center;
display: table-cell;
vertical-align: middle;
color: #fff;
font-size: 3em;
}
.uli li:before {
content: '';
position: absolute;
top: 0;
width: 2px;
height: 100%;
left: 49px;
background: #eaeaea;
z-index: -1;
}
.uli li:last-child:before {
display: none;
}
.uli .ulcontent{
display: table-cell;
vertical-align: middle;
padding-left: 100px;
}
.entry-content .uli > li{
list-style-type: none;
}<ul class="uli">
<li>
<span>1</span>
<div class="ulcontent">
<h3>First Contact</h3>
<p>You can contact me and discuss your idea. If you want, you can do so <a href="#">Here</a></p>
</div>
</li>
<li>
<span>2</span>
<div class="ulcontent">
<h3>Web Consulting</h3>
<p>We will arrange an interview to get to know each other and clarify the project's fundamentals.</p>
</div>
</li>
<li>
<span>3</span>
<div class="ulcontent">
<h3>Web Design</h3>
<p>The creation of a design for your project begins based on its specific needs</p>
</div>
</li>
<li>
<span>4</span>
<div class="ulcontent">
<h3>Development</h3>
<p>Once the final design is approved, we start the development phase, where the theme is programmed entirely from scratch and all web functionalities are added.</p>
</div>
</li>
<li>
<span>5</span>
<div class="ulcontent">
<h3>Implementation</h3>
<p>At this point, the content is added, customized, and transferred to your server so you can manage it yourself.</p>
</div>
</li>
<li>
<span>6</span>
<div class="ulcontent">
<h3>Pre-Consultation</h3>
<p>We will meet via video conference to introduce ourselves and lay down the foundations for what will be your new membership site. Are you ready? Let's go!</p>
</div>
</li>
</ul>