如何将标题编号右边对齐在边距？

Question

我想把标题编号放在边距内。这是一个例子：

正如您所看到的，数字在边距中右对齐，文本标题在主要边距上是合理的。

有可能在JSFiddle上做一个小例子吗？这是我的测试：https://jsfiddle.net/79ehtbqb/1/

<div class="container">

<h1><span class="number">2</span>Le stockage de l'énergie</h1>

<div class="box">
    <div class="toc-h1"><span class="number">2.1</span>Le stockage de l'énergie</div>
    <div class="toc-h1"><span class="number">2.2</span>Les défis du secteur de l'énergie</div>
    <div class="toc-h1"><span class="number">2.3</span>One-dimensional Momentum</div>
    <div class="toc-h2"><span class="number">5.2.1</span>Conservation de la quantité de mouvement</div>
    <div class="toc-h2"><span class="number">5.2.2</span>Bernouilli</div>
    <div class="toc-h2"><span class="number">5.2.3</span>La poussée</div>
    <div class="toc-h2"><span class="number">5.2.4</span>Le facteur d'induction axial</div>
</div>

<h2><span class="number">2.1</span>Le stockage de l'énergie</h2>

<p>Face à la menace que représente le réchauffement climatique pour l’ensemble de l’humanité, des accords internationaux ont été conclus, qui engagent les Etats signataires sur des objectifs de maîtrise de l’énergie et de réduction des émissions de gaz à effet de serre.</p>

<h3><span class="number">2.1.1</span>Le stockage de l'énergie</h3>

<p>Face à la menace que représente le réchauffement climatique pour l’ensemble de l’humanité, des accords internationaux ont été conclus, qui engagent les Etats signataires sur des objectifs de maîtrise de l’énergie et de réduction des émissions de gaz à effet de serre.</p>

注意：要连接文本，我将使用Hyphenator.js