如何用display:flex合并两段并将View More移至第一段末尾

如何将View More文本移至第一段的末尾？要求不修改现有样式、不使用!important，仅通过display:flex实现，是否可行？

现有代码如下：

CSS #

.main {
    width: 500px;
    background-color: #eee;
    display: flex;
}
.main p {
    display: flex;
}

HTML #

<div class="main">
  <p>
    Lorem ipsum dolor sit amet, consectetur adipiscing elit. Phasellus euismod sem quis felis sollicitudin, molestie
    vehicula lacus venenatis. Aenean sollicitudin malesuada neque. Integer vel molestie lacus. Vestibulum ante ipsum
    primis in faucibus orci luctus et ultrices posuere cubilia curae; Vivamus pretium purus sed iaculis faucibus. In
    quis dictum augue. Nunc porta vestibulum turpis et dictum. Ut cursus laoreet euismod. Nam at dapibus libero. Donec
    lacinia erat at nisl mollis mollis. In consectetur nisi at massa scelerisque consequat. Etiam quis nisi ut massa
    fermentum fermentum. Suspendisse ultrices, justo sit amet porttitor pretium, lorem nulla blandit augue, vel tempus
    elit enim nec dui. Aenean suscipit quam eu eros pulvinar, id accumsan ante euismod.
  </p>
  <p>View More</p>
</div>

预期效果：第一段文本正常排版，View More位于第一段文本的末尾（与最后一行文本衔接）

完全可行，无需修改现有样式或使用!important，只需新增以下CSS规则：

.main {
  flex-wrap: wrap;
}
.main p:first-child {
  display: inline-flex;
  flex: 1;
}

原理说明 #

1. 给.main添加flex-wrap: wrap，允许子元素在容器空间不足时自动换行；
2. 用更具体的选择器.main p:first-child将第一个段落的显示类型改为inline-flex（优先级高于原.main p的规则，无需!important），同时设置flex: 1让它自动填充容器的可用空间，这样第二个段落（View More）就会紧贴第一段文本的末尾，当第一段文本占满容器宽度后，它会自动换行到最后一行的末尾，完全符合预期效果。

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