JSFiddle - React, Tailwind, and code Playground

HTML

<p>
  I use ul instead of ol because I need a version with only number on mobile. The correctif could also be used for checkbox with label.
</p>
<br/>
<ul>
  <li class="menu13">
    <span class="number">1</span>
    <span class="dot">.&nbsp;</span>
    <span class="text">menu 1</span>
  </li>
  <li class="menu2">
    <span class="number">2</span>
    <span class="dot">.&nbsp;</span>
    <span class="text">menu 2 is so long that I need to find a way to align multiple line. So I want no padding left on the second line. But I cant use css flex because it not working on IE9. I cant use width (like menu 5).</span>
  </li>
  <li class="menu3">
    <span class="number">3</span>
    <span class="dot">.&nbsp;</span>
    <span class="text">menu 3 - this is an example with flex BUT I do not want to use that. I search an alternative. But as you can see, all lines are align. I want the same thing without flex.</span>
  </li>
  <li class="menu4">
    <span class="number">4</span>
    <span class="dot">.&nbsp;</span>
    <span class="text">menu 4 - test with block . Not working, so Blah Blah Blah Blah Blah Blah Blah Blah Blah Blah Blah Blah Blah Blah Blah Blah Blah Blah Blah Blah Blah Blah Blah Blah Blah Blah Blah.</span>
  </li>
  <li class="menu5">
    <div class="number">5</div>
    <div class="dot">.&nbsp;</div>
    <div class="text">menu 5 - test with float. Not working, so Blah Blah Blah Blah Blah Blah Blah Blah Blah Blah Blah Blah Blah Blah Blah Blah Blah Blah Blah Blah Blah Blah Blah Blah Blah Blah Blah.</div>
  </li>
</ul>
<div class="clear" />
<br/>
  <div class="testCB1">
    <input type="checkbox" id="cb1" />
    <label for="cb1">Blah Blah Blah Blah Blah Blah Blah Blah Blah Blah Blah Blah Blah Blah Blah Blah Blah Blah Blah Blah Blah Blah Blah Blah Blah Blah Blah Blah Blah Blah Blah Blah Blah Blah</label>
  </div>

CSS

.clear{
  clear:both;
}
ul {
  list-style: none;
  padding-left: 0;
  text-indent: 0;
}

.menu3 {
  display: flex;
}

.menu4 {
  display: block;
}

.menu4 span {
  float: left;
  display: inline-block;
}

.menu5 div {
  float: left;
}

.menu5 div.number {
  width: 1em;
}

.menu5 div.dot {
  width: 1em;
}

.menu5 div.text {
  width: 90%;
  /* Error, the text need to have the rest. If the width is shortest, the text jump under number and dot. */
}

.testCB1{
  padding-left:15px;
}

.testCB1 input{
  margin-left:-20px;
}