Set CSS <ol> height so that the text does not evolve the number

Question

I need to make a list of topics with the numeration on the side, I used the html to do this, only I’m not able to make it look like the image below

I’m doing like this

.numeros_cases, ol{
    list-style:none;
    counter-reset:item;
}
.numeros_cases, ol li{
    counter-increment:item;
}
.numeros_cases, ol li:before {
    content: counter(item);
    color: #f7931e;
    margin-right: 20px;
    font-size: 60px;
}
.numeros_cases, li{
	margin-top:20px;
	width:auto;

}

.numeros_cases {
    width: 100%;
    margin: 0 auto;
    color: #000;
    font-size: 27px;
    line-height: 35px;
}
.titulo_borda_cases {
    text-transform: uppercase;
    text-align: center;
    font-size: 36px;
    font-family: Raleway;
    font-weight: 300;
    border-bottom: 1px solid #f7931e;
    padding-bottom: 15px;
    width: 100%;
    margin: 0 auto;
    margin-bottom: 30px;
    padding-top: 50px;
    
}
.titulo_cases {
    text-transform: uppercase;
    text-align: center;
    font-size: 24px;
    font-family: Raleway;
    font-weight: 300;
}

<ol class="numeros_cases">
   <li>O fator <strong>“personalização” </strong>no segmento foi identificado como <strong>oportunidade </strong>de agregar valor ao produto explorando como “novidade”.</li>
   <li>Explorar as <strong>Cores </strong>das garrafas que comunicam com o público-alvo (predominância feminina).</li>
   <li>CO nome deveria remeter ao consumidor a sensação de algo <strong>moderno </strong>e de qualidade superior com um viés de <strong>produto “importado”</strong>.</li>
</ol>

Answer 1

You can do a combination of various styles in the element <ol> and <li>, as position: absolute;, position: relative;, left, top, margin-top among others.

I had to redo his code because there was a lot of redundancy, as for example:

Instead of .numeros_cases, ol{, just need .numeros_cases{, since this class is already the <ol>.

Let’s get down to business. See below for the effect you’d like with optimized code:

html, body{ background: #555;  }

.numeros_cases{
    list-style:none;
    counter-reset:item;
    position: relative;
    margin: 0 auto;
    color: #000;
    font-size: 27px;
    line-height: 35px;

    padding-left: 50px;
}
.numeros_cases li{
   counter-increment:item;
   margin-top:20px;
   width: 100%;
   
   position: relative;
   color: #fff;
}
.numeros_cases li:before {
   content: counter(item);
   color: #f7931e;
   font-size: 60px;
   
   position: absolute;
   left: -50px;
   line-height: 50px;
   width: 50px;
   height: 50px;
   top: 50%;
   margin-top: -25px;
}

.titulo_borda_cases {
    text-transform: uppercase;
    text-align: center;
    font-size: 36px;
    font-family: Raleway;
    font-weight: 300;
    border-bottom: 1px solid #f7931e;
    padding-bottom: 15px;
    width: 100%;
    margin: 0 auto;
    margin-bottom: 30px;
    padding-top: 50px;
    
}
.titulo_cases {
    text-transform: uppercase;
    text-align: center;
    font-size: 24px;
    font-family: Raleway;
    font-weight: 300;
}

<ol class="numeros_cases">
 	<li>O fator <strong>“personalização” </strong>no segmento foi identificado como <strong>oportunidade </strong>de agregar valor ao produto explorando como “novidade”.</li>
 	<li>Explorar as <strong>Cores </strong>das garrafas que comunicam com o público-alvo (predominância feminina).</li>
 	<li>CO nome deveria remeter ao consumidor a sensação de algo <strong>moderno </strong>e de qualidade superior com um viés de <strong>produto “importado”</strong>.</li>
</ol>