[FIXED] How to align text vertically equal top CSS

Issue

I am trying to align the text vertically equal using css, but there is some sort of space in the right side span.

Have added the code and fiddle link.

p{
    clear: both;
    margin: 0;
    padding: 0;
    display: table;
}
span.blue{
  background: blue;
}
span.green{
  background: green;
}
span.black{
  background: black;
}
span.circle{
      width: 15px;
    height: 15px;
    -webkit-border-radius: 15px;
    border-radius: 15px;
    display: inline-block;
    margin-right: 12px;
    /* float: left; */
    vertical-align: top;
}
span.desc{
      /* float: left; */
    width: 115px;
    vertical-align: top;
    display: inline-block;
}

<div class="container">
  <p>
     <span class="blue circle"></span>
     <span class="desc">Blue text</span>
  </p>
  
  <p>
     <span class="green circle"></span>
     <span class="desc">Green text</span>
  </p>
  
  <p>
     <span class="black circle"></span>
     <span class="desc">black text</span>
  </p>

</div>

Fiddle Link

Solution

Use vertical-align: middle or you can use the same line-height and font-size to solve the issue as in the snippet below.

p span {
    font-size: 16px;
    line-height: 16px;
}

Explanation:

Keeping the same line-height and font-size will ensure that vertical-align: top will work perfectly fine.

snippet below:

p{
    clear: both;
    margin: 0;
    padding: 0;
    display: table;
}
span.blue{
  background: blue;
}
span.green{
  background: green;
}
span.black{
  background: black;
}
span.circle{
      width: 15px;
    height: 15px;
    -webkit-border-radius: 15px;
    border-radius: 15px;
    display: inline-block;
    margin-right: 12px;
    /* float: left; */
    vertical-align: top;
}
span.desc{
      /* float: left; */
    width: 115px;
    vertical-align: top;
    display: inline-block;
}
p span {
    font-size: 16px;
    line-height: 16px;
}

<div class="container">
  <p>
     <span class="blue circle"></span>
     <span class="desc">Blue text</span>
  </p>
  
  <p>
     <span class="green circle"></span>
     <span class="desc">Green text</span>
  </p>
  
  <p>
     <span class="black circle"></span>
     <span class="desc">black text</span>
  </p>

</div>

Answered By - kukkuz

Answer Checked By - David Marino (PHPFixing Volunteer)