Problems styling UL with table-cell - html

Question

I want to show my the section "How it works" of my website like this:
https://codepen.io/carlosmr/pen/NVbbmx
The problem is that if the text is too long at the right the numbers at the left grow with it, like in number 4.
Is there a way to leave the numbers at the left and the text at the right without that problem? Thanks!
.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>Primer contacto</h3>
<p>Contactas conmigo y me cuentas tu idea. Si quieres puedes hacerlo Aquí</p>
</div>
</li>
<li>
<span>2</span>
<div class="ulcontent">
<h3>Consultoría web</h3>
<p>Organizamos una entrevista para conocernos y aclarar las bases del proyecto.</p>
</div>
</li>
<li>
<span>3</span>
<div class="ulcontent">
<h3>Diseño web</h3>
<p>Empieza la creación de un diseño para tu proyectos basado en las necesidades del mismo</p>
</div>
</li>
<li>
<span>4</span>
<div class="ulcontent">
<h3>Desarrollo</h3>
<p>Una vez se apruebe el diseño definitivo comenzamos la fase de desarrollo, en la cual se programa el tema totalmente desde cero y se le añaden todas las funcionalidades a la web</p>
</div>
</li>
<li>
<span>5</span>
<div class="ulcontent">
<h3>Implementación</h3>
<p>En este momento se añade el contenido, se personaliza y se traslada a tu servidor para que puedas administrarlo tu mismo</p>
</div>
</li>
<li>
<span>6</span>
<div class="ulcontent">
<h3>Consultoría previa</h3>
<p>Nos reuniremos por videoconferencia para conocernos y sentar las bases de lo que será tu nuevo sitio de membresía. ¿Estás listo? ¡Vamos allá!</p>
</div>
</li>
</ul>

Answer 1

You can add the below styles to the <span> tag which is inside the <li> tag.
display: block;
float: left;
line-height: 100px;
Check the edited codepen
Edited version