javascript - 如何将文本与居中文本的左侧对齐？

Question

因此我们需要一个解决方案来满足此对齐要求:

---------------------------
|         BlaBla          |
|    Bla BlaBla BlaBla    |
|        BlaBla Bl        |
---------------------------
|    OtherText            |
---------------------------

居中的动态 BlaBla 文本与 OtherText 一起位于响应式宽度容器中。 OtherText 应该左对齐，但是(这是根本问题)仍然与居中文本的左侧对齐。

所以用简单的CSS我只能实现这个:

---------------------------
|         BlaBla          |
|    Bla BlaBla BlaBla    |
|        BlaBla Bl        |
---------------------------
|OtherText                |
---------------------------

谁知道 super 棒的 CSS 或 JavaScript 解决方案？

.slider {
  width: 100%;
}
.slider .title {
  width: 80%;
  text-align: center;
}
.slider .btn {
  text-align: left;
}

<div class="slider">
  <h1 class="title">BlaBla<br>Bla BlaBla BlaBla<br>BlaBla Bl</h1>
  <span class="btn">OtherText</span>
</div>

Answer 1

解决方案是添加一个带有 display: inline-block; 的容器:

.slider {
  width: 100%;
  text-align: center;
  border: 1px dotted;
}
.slider .container {
  display: inline-block;
  border: 1px dotted;
}
.slider .btn {
  text-align: left;
}

<div class="slider">
  <div class="container">
    <h1 class="title">BlaBla<br>Bla BlaBla BlaBla<br>BlaBla Bl</h1>
    <div class="btn">OtherText</div>
  </div>
</div>