【HTML&CSS】改行後の文章のズレについて

Question

<問題概要>

写真の用に改行した後の文字を正しい位置に戻したいと思っています。
（EnglishをStudyの頭の位置に持ってきて揃えたい）

<前提>
・記述してあるコードに沿っている回答がえられると嬉しいです。

<試したこと>
・text-indent: これでは10からStudy Englishまでが全て動いてしまいます。

<現段階のソースコード>

<h5 class="text"><span class="smallfigure">10</span>STUDY<br>ENGLISH</h5>

.title{
      font-size:13px;
      font-family: 'Prompt', sans-serif;
      font-weight:400;
      width:220px;
      .small-figure{
               color:$font-blue;
               font-size:13px;
               font-family: 'Prompt', sans-serif;
               font-weight:400;
               margin-right:26px;
      }
   }

よろしくお願いします！

Answer 1

現状のHTML、CSSではそうなるのが正しい配置です。

・記述してあるコードに沿っている回答がえられると嬉しいです。

10だけ特別扱いすることになりますので、position: absolute; で位置決めすればどうでしょうか。
ご希望に沿っているかどうかは分かりませんが。

.title{
  font-size:13px;
  font-family: 'Prompt', sans-serif;
  font-weight:400;
  width:220px;
  margin-left: 40px;
  position: relative;
  .small-figure{
    font-size:13px;
    font-family: 'Prompt', sans-serif;
    font-weight:400;
    position: absolute;
    left:-40px;
  }
}

Comments

[yuto_urushima]

回答ありがとうございます！
参考になる回答でした！

Answer 2

.titleが何を指しているのかわからないので取り合えず.textにしてしまいましたが、どちらにせよtext-indent分をpadding-leftでずらせばいいです。

<h5 class="text"><span class="smallfigure">10 </span>STUDY<br>ENGLISH</h5>

.text {
  font-size: 13px;
  font-family: "Prompt", sans-serif;
  font-weight: 400;
  width: 220px;
  padding-left: 1.5em;
  text-indent: -1.5em;
  .small-figure {
    font-size: 13px;
    font-family: "Prompt", sans-serif;
    font-weight: 400;
    margin-right: 26px;
  }
}

Comments

[yuto_urushima]

回答ありがとうございます！
おかげさまで、解決しました！