Bootstrap Irregular Spacing With Shorter Amount of Text

I am trying to make the bullet point text align with the other bullet points, however, when the text does not span across multiple lines, there is less margin.

The bullet point is an image.

Here's my HTML

                 <div class="row col-md-12 col-lg-10 description-row">                      <div class="col-3 d-flex justify-content-center mr-4">                                                     <img height="90px" src="./img/calendar.svg"/>                      </div>                      <div class="col">                          <div class="row">                              <div class="row">                                  <div class="col-1">                                      <img height="10px" src="./img/bullet.png"/>                                  </div>                                  <div class="col">                                      <p class="p-text-small">Start Date: Monday April 12th </p>                                  </div>                              </div>                              <div class="row pt-4">                                  <div class="col-1">                                      <img height="10px" src="./img/bullet.png"/>                                  </div>                                  <div class="col">                                      <p class="p-text-small">Classes are from 9:00 to 10:00am every Monday, Wednesday and Friday (optional Saturday) for 6 weeks.</p>                                  </div>                              </div>                                                        </div>                      </div>                     </div>  

CSS

.description-row {    margin-top: 60px;  }  .p-text-small {    font-size: 16px;  }  

https://stackoverflow.com/questions/66791633/bootstrap-irregular-spacing-with-shorter-amount-of-text March 25, 2021 at 09:07AM