将div与另一个div的第一行的基线对齐？

Question

我有两个div，想要调整他们的基线。但是，其中一个div有多行文本和一些嵌入内容，虽然我想将它们与顶部基线对齐，但浏览器似乎与底部对齐。

我使用以下HTML构建了一个JSFiddle here来说明：

GeoPoint

和CSS：

String

我想要的是：

我得到的是：

纯CSS解决方案会很好，但我也不反对在这里使用JavaScript。任何帮助将不胜感激！

Answer 1

你可以使用包装div和一点弹性框来完成它。

.wrapper {
  display: flex;
  align-items: baseline;
}

.note {
  margin-right: 1ch;
}

.embedded {
    width: 40px;
    height: 40px;
    display: inline-block;
    vertical-align: -15px;
    border: 1px solid black;
}

<div class="wrapper">
  <div class="note" style='display:inline-block;'>NOTE:</div>
  <div style='display:inline-block; width:200px;'>
      Here's <div class='embedded'></div> an embedded div and more text
  </div>  
</div>

Answer 2

This will solve your issue:    
 `<div style="display: flex;">
      <div style="padding-top: 13px;">NOTE: &nbsp;</div>
      <div>
        <p style="display:inline">
          Here's
          <span class='embedded'></span>
          an embedded div
          <br/> 
          and more text
        </p>
      </div>
    </div>`

链接：JSFiddle