如何实现两栏Header与对应正文文本的横向对齐？

当前页面中两个Header及对应正文行出现错位，原始显示效果如下：

Header

  waspeen: 3304.07
ananas: 24
appel: 3962.0

Header

  waspeen: 3304.07
ananas: 30
appel: 3962.0

期望实现左右两栏Header及对应正文行横向对齐的效果：

Header                     Header

waspeen: 3304.07           waspeen: 3304.07
ananas: 30                 ananas: 24
appel: 3962.0              appel: 3962.0

1. 修正CSS样式 #

当前CSS中padding-left:50px是导致首行错位的核心原因，display:inline也会破坏块级布局，调整后的CSS如下：

#gallery-text {
  display: flex; /* 用flex实现稳定的两栏横向布局 */
  justify-content: space-between;
  width: 100%;
}

#gallery-text-left, #gallery-text-right {
  width: 48%; /* 留少量间距避免两栏拥挤 */
}

#gallery-paragraph-1, #gallery-paragraph-2 {
  margin-right: 0;
  border-radius: 4px; /* 统一圆角样式 */
  padding-left: 0; /* 移除导致错位的左内边距 */
}

#gallery-text-quote-left, #gallery-text-quote-right {
  margin-bottom: 16px; /* 给Header和正文添加统一间距 */
}

2. 优化HTML结构 #

移除内嵌的float:left样式（改用flex布局更可靠），同时修正左侧Header的多余空格：

<div class="container center">
    <div id="gallery-text">
        <div id="gallery-text-left">
            <p id="gallery-text-quote-left" style="font-family:Century Gothic; color:#006600"><b>Header</b></p>
            <p id="gallery-paragraph-1" style="font-family:Georgia">
                {% for key, value in content %}
                <span {% if key in diff_set %} style="color: red;" {% endif %}>{{ key }}: {{value}}</span><br>
                {% endfor %}
            </p>
        </div>

        <div id="gallery-text-right">
            <p id="gallery-text-quote-right" style="font-family:Century Gothic; color:#006600"><b>Header</b></p>
            <p id="gallery-paragraph-2" style="font-family:Georgia">
                {% for key, value in content_excel %}
                <span {% if key in diff_set %} style="color: red;" {% endif %}>{{ key }}: {{value}}</span><br>
                {% endfor %}
            </p>
        </div>
    </div>
</div>

3. 额外对齐优化 #

将<span>+<br>替换为<div>，让每一行成为独立块级元素，对齐更稳定：

{% for key, value in content %}
<div {% if key in diff_set %} style="color: red;" {% endif %}>{{ key }}: {{value}}</div>
{% endfor %}

内容的提问来源于stack exchange，提问作者mightycode Newton