Html 将文本左上方与下方的Div对齐

我展示了两个iFrame。在iFrame上面，我想插入每个iFrame的描述。我能够在下面的iframe上对齐描述A，但无法在第二个iframe的左边缘上直接对齐描述B

.wrap{
显示器：flex；
}
拉平先生{
弹性：1；
垫底：20px；
}
.guidedQueryHeading{
字体系列：“Arial窄”，Arial，无衬线；
颜色：#FFF；
字体大小：24px；
字号：600；
填充顶部：30px；
文本阴影：2PX2PX8PXRGBA（43,43,43,1.00）；
}

说明A：
说明B：

使用

display:flex

您可以创建简单的列/行设置，并在需要的位置对齐元素。使用以下元素的快速示例

.row{
显示器：flex；
弯曲方向：行；
柔性包装：包装；
宽度：100%；
}
.栏目{
宽度：50%；
显示器：flex；
弯曲方向：立柱；
弹性基准：100%；
弹性：1；
}
.guidedQueryHeading{
字体系列：“Arial窄”，Arial，无衬线；
颜色：#FFF；
字体大小：24px；
字号：600；
填充顶部：30px；
文本阴影：2PX2PX8PXRGBA（43,43,43,1.00）；
}

说明A：
说明B：

您可以尝试将每个描述和相应的iframe包装在单独的div中，然后使用display:flex将它们放在行div中，如下所示：

html，正文{
宽度：100%；
身高：100%；
}
iframe{
宽度：自动；
}
.iframe元素{
利润率：10px；
}
.行{
宽度：100%；
显示器：flex；
弯曲方向：行；
对齐项目：居中；
}
.guidedQueryHeading{
字体系列：“Arial窄”，Arial，无衬线；
颜色：#FFF；
字体大小：24px；
字号：600；
文本阴影：2PX2PX8PXRGBA（43,43,43,1.00）；
}

说明A：
说明B：

只需将新的自定义css添加为： CSS:

.wrap {
  display: flex;
    }

    .wrapIn {
  flex: 1;
  padding-bottom: 20px;

    }
.custom{
    padding-right: 375px !important;
}

    .guidedQueryHeading {
  font-family: "Arial Narrow", Arial, sans-serif;
  color: #FFF;
  font-size: 24px;
  font-weight: 600;
  padding-top: 30px;
  text-shadow: 2px 2px 8px rgba(43, 43, 43, 1.00);
    }

<div class="wrap">
    <div class="guidedQueryHeading col-xl-10 offset-xl-1 wrapIn">Description A:</div>
    <div class="guidedQueryHeading col-xl-1 wrapIn custom">Description B:</div>
  </div>

  <div class="row">
    <div class="offset-xl-1 col-xl-10 wrapIn">
      <iframe src="https://www.w3schools.com" width="25%" align="left" style="margin-left:auto; margin-right:auto; display:block;" scrolling="auto" height="600" allowfullscreen>
      </iframe>
      <iframe src="https://www.w3schools.com" width="60%" align="right" height="600" allowfullscreen></iframe>
    </div>
  </div>
</div>

HTML:

.wrap {
  display: flex;
    }

    .wrapIn {
  flex: 1;
  padding-bottom: 20px;

    }
.custom{
    padding-right: 375px !important;
}

    .guidedQueryHeading {
  font-family: "Arial Narrow", Arial, sans-serif;
  color: #FFF;
  font-size: 24px;
  font-weight: 600;
  padding-top: 30px;
  text-shadow: 2px 2px 8px rgba(43, 43, 43, 1.00);
    }

<div class="wrap">
    <div class="guidedQueryHeading col-xl-10 offset-xl-1 wrapIn">Description A:</div>
    <div class="guidedQueryHeading col-xl-1 wrapIn custom">Description B:</div>
  </div>

  <div class="row">
    <div class="offset-xl-1 col-xl-10 wrapIn">
      <iframe src="https://www.w3schools.com" width="25%" align="left" style="margin-left:auto; margin-right:auto; display:block;" scrolling="auto" height="600" allowfullscreen>
      </iframe>
      <iframe src="https://www.w3schools.com" width="60%" align="right" height="600" allowfullscreen></iframe>
    </div>
  </div>
</div>

说明A：
说明B：

解决方案之一是使用“flex grow”，帮助您轻松调整项目

.wrap{
显示器：flex；
}
拉平先生{
弹性：1；
垫底：20px；
}
.guidedQueryHeading{
字体系列：“Arial窄”，Arial，无衬线；
颜色：#FFF；
字体大小：24px；
字号：600；
填充顶部：30px；
文本阴影：2PX2PX8PXRGBA（43,43,43,1.00）；
}
.项目1{
柔性生长：2；
}
.项目2{
柔性生长：3；
}

说明A：
说明B：

谢谢您的回复。虽然这似乎是最快/最容易实现的解决方案，但我确实希望维护的一件事是处理不同的屏幕大小。如果你进入一个非最大化视图，你会注意到它不再在描述B的iframe上方排列。谢谢你的回复。这是我尝试过的，它似乎对我的应用程序有效。然而，我忽略了一件事，那就是我希望它能在各种大小的屏幕上甚至移动应用程序上工作。不幸的是，flex grow似乎因屏幕大小的不同而有所不同。再次感谢。