css - アダプティブ デザインでリスト アイテムを水平方向に配置する

Question

JSFiddleを参照してください。

これは、コードに「vw」パラメーターを使用した適応設計です。Text_1 、Text_2、およびText_3を水平方向に配置します。つまり、ブラウザーのウィンドウ サイズを変更すると、画面の左側からテキストの先頭までの距離が、これら 3 つの単語で同じになります。現在のコードでは、(「margin」プロパティを使用して) それらを揃えていますが、ブラウザーのウィンドウ サイズが変更されるとすぐに、Text_2 と Text_3 は Text_1 に対して相対的に移動します (ウィンドウ サイズが縮小すると右に、拡大すると左に)。コードの何が間違っていますか?

<div class="meaning">
<ol class="circle">
<li>Text_1</li>
<ul>
  <li><span class="example">Text_2</span></li>
  <li><span class="example_translated">Text_3</span></li>     
</ul>
</ol>
</div>

.meanings_and_examples {
display: flex;
flex-direction: column;
}

.meaning {
font-family: Tahoma, Geneva, sans-serif;
width: auto;
text-align: left;
color: #1f2c60;
font-weight: 700;
word-wrap: break-word;
text-shadow: 0.06em 0.06em 0.09em rgba(0, 0, 0, 0.2);
margin-right: 1%;
font-size: calc(0.5em + 2.3vw);
}

ol.circle {
list-style-type: none;
}

li {
line-height: calc(1.1em + 1.5vw);
}

ol.circle > li {
counter-increment: item;
margin: 0% 0% 0.2% 1.3em;
}

ol.circle > li::before {
content: counter(item);
display: inline-block;
text-align: center;
border-radius: 100%;
width: calc(1.2em + 1.5vw);
background: #1f2c60;
color: white;
box-shadow: 0.06em 0.06em 0.09em rgba(0, 0, 0, 0.2);
margin: 0% 3.5% 0% -2.4em;
}

ul {
list-style-type: none;
}

.example {
width: auto;
text-align: left;
font-weight: 400;
}

.example_translated {
width: auto;
text-align: left;
font-weight: 400;
color: #5d78e5;
}