HTML-элементы не выстраиваются, когда текст слишком длинный

Question

Я использую шаблоны Twig с файлами scss и js. Я создал шаблон веточки для всплывающих окон Bootstrap. Информация о всплывающих окнах отформатирована правильно в большинстве случаев. Тем не менее, кажется, что когда некоторый текст становится слишком длинным, в частности тег Instructor Info <p>, выравнивание изменяется.

Правильный макет. @ - это значок.

@ Header Text
  Instructor info text
  text text text text text text

@ Header Text
  Instructor info text
  text text text text text text

Случай ошибки

@ 
Header Text
Longer than average Instructor info text 
text text text text text text

@ Header Text
  Instructor info text 
  text text text text text text

Веточка и HTML

{% embed 'fragments/popover.html.twig' %}
    {% block link_class %}more-sections{% endblock %}
    {% block link_text %}
        <span class="fa fa-info-circle"></span>
    {% endblock %}

{% block title %}Contact Info{% endblock %}
{% block content %}
    {% for ArrayIndex in 0..(section.getInstructorNamesArrayCount()-1)  %}
    <div>
        <span class="fa fa-user instructor-contact-info-header"></span>
        <div class="contact-info-container">
            <p class="instructor-contact-info-header">{{section.getInstructorNamesArray()[namesArrayIndex]}}</p>
            <p class="instructor-contact-info-data">{{ section.getInstructorInfo()[namesArrayIndex] }}</p>
            <p class="instructor-contact-info-data" style="color: #005993; margin: 0;" >{{ section.getInstructorEmails[namesArrayIndex] }}</p>
        </div>
    </div>
   {% endfor %}
{% endblock %}

CSS

.instructor-contact-info-header {
  display: inline-block;
  color: #005993;
  margin: 0;
}

.instructor-contact-info-data {
  margin: 0;
}

.contact-info-container {
  display: inline-block;
  vertical-align: top;
}

EDIT :: Ниже приведен код для одного блока информации, который производит

<div class="popover-inner-content ">                                                                                
<div>
    <span class="fa fa-user instructor-contact-info-header"></span>
    <div class="contact-info-container">
        <p class="instructor-contact-info-header">LASTNAME, S.</p>
        <p class="instructor-contact-info-data">Title, Department of..., Statistics</p>
        <p class="instructor-contact-info-data" style="color: #005993; margin: 0;" >email@email.com</p>
   </div>
</div>

Здесь приведен код второй контактной информации, которая дает правильное расположение

<div class="contact-info-container">
    <p class="instructor-contact-info-header">LASTNAME, D.</p>
    <p class="instructor-contact-info-data">Statistics</p>
    <p class="instructor-contact-info-data" style="color: #005993; margin: 0;" >name@email.com</p>
</div>
</div>