Vertically align smaller bullets with larger text

Question

I have a list with bullets. I made the bullets smaller by putting the li text inside a span and making the font-size of the li smaller tha

Answer 1

Use an unordered list and display the list items as tables.

Take a look at this example: https://jsfiddle.net/luenib/jw1ua38v/

The icon, number, or whatever you want to place is going to be located inside a span. The content of the span is centered horizontally and vertically, very useful if you don't want to display your icon on the top. The text inside the paragraph will keep a space to its left, so it won't go under the icon in case the text extends in more than one line.

CSS:

ul {
  padding-left: 0;
}

li {
  display: table;
}

li span {
  width: 40px;
  display: table-cell;
  text-align: center;
  vertical-align: middle;
}

HTML:

  
1
    
Some text here. Some text here. Some text here. Some text here. Some text here. Some text here.
  
  
2
    
Some text here. Some text here. Some text here.