对齐文本以匹配另一个CSS元素的开头

我正试图以某种方式将文本对齐，并希望它也能以响应的方式工作

我有一节课，以分区为中心 （我被迫指定50%的宽度和高度，否则它将无法水平或垂直居中

我正在尝试将

*Lorem的sipsum ipsul lo ip lipson loroem
与
Loremipsumlo
左对齐（请参阅codepen）

段落文本应以loremipsup的L开头

如果不经常调整顶部位置（当屏幕大小改变时），我似乎不知道该怎么做，这是我不想做的

h1是相对位置的，跨距都是绝对右位置：0；。这很好，所以我不想更改它。请参阅下面的类设置

h1 {
  position: relative;
}
h1 span {
  position: absolute;
  right: 0;
}

<div class="jumbo-header">
    <h1>
      <span>Experience</span><span><strong>Loremipsumlo</strong></span>
    </h1>
    <p><span><sup>*</sup>Lorem's sipsum ipsul lo ip lipson loroem</span></p>
 </div>

.jumbo-header {
    border: 1px solid yellow;
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    margin: auto;
    width: 50%;
    max-width: 38em;
    height: 50%;
    z-index:10;   }

h1{
位置：相对位置；
}
h1跨度{
位置：绝对位置；
右：0；
}
经验Loremipsumlo
*Lorem's sipsum ipsul lo ip lipson Lorooem

.jumbo头{
边框：1px纯黄色；
位置：绝对位置；
排名：0；
左：0；
右：0；
底部：0；
保证金：自动；
宽度：50%；
最大宽度：38em；
身高：50%；
z-索引：10；}
是CSS还是SCSS？请澄清。我对如何做更感兴趣SCSS正是我正在使用的。它可以编译成CSS。创建。添加相关标记。
：）
好的，我很抱歉不，除非你有Sass->CSS编译问题，否则只提供编译后的CSS。这不是Sass的问题。