<!-- Tutorial from Design Shack 
https://designshack.net/articles/css/5-simple-and-practical-css-list-styles-you-can-copy-and-paste/ -->

<! DOCTYPE html>
<html>
  <head>
    <title>Big Numbers Ordered List</title>
  </head>

<body>
  <div>
    <ol>
      <li><span>01</span><p>In locavore voluptate assumenda. Non raw denim sapiente aute small batch fap. Raw denim cliche lo-fi umami cray incididunt sunt before they sold out. Viral mollit flexitarian locavore, beard readymade eiusmod anim.</p></li>
      
      <li><span>02</span><p>In locavore voluptate assumenda. Non raw denim sapiente aute small batch fap. Raw denim cliche lo-fi umami cray incididunt sunt before they sold out. Viral mollit flexitarian locavore, beard readymade eiusmod anim.</p></li>
      
      <li><span>03</span><p>In locavore voluptate assumenda. Non raw denim sapiente aute small batch fap. Raw denim cliche lo-fi umami cray incididunt sunt before they sold out. Viral mollit flexitarian locavore, beard readymade eiusmod anim.</p></li>
      
      <li><span>04</span><p>In locavore voluptate assumenda. Non raw denim sapiente aute small batch fap. Raw denim cliche lo-fi umami cray incididunt sunt before they sold out. Viral mollit flexitarian locavore, beard readymade eiusmod anim.</p></li>
    </ol>
  </div>
</body>

</html>
/* browser reset */

* {
  margin: 0;
  padding: 0;
}

div {
  width: 500px;
  margin: 20px auto;
}

/* list styles */

ol {
  list-style: none;
  color: #ccc;
}

ol li {
  font: bold 24pt helvetica, arial, sans-serif;
  position: relative;
  margin-bottom: 20px;
}

li p {
  font: 12pt helvetica, arial, sans-serif;
  color: #555;
  padding-left: 60px;
}

span {
  position: absolute;
  line-height: 25px;
}
  

External CSS

This Pen doesn't use any external CSS resources.

External JavaScript

This Pen doesn't use any external JavaScript resources.