文本过长时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;
}

编辑：：以下是产生该信息的一个信息块的呈现代码

<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>