How can I get margin exactly in the width of imaginary text content?

Question

This is a list I am working with:

* {
  margin: 0;
  padding: 0;
  font-family: Arial;
}

ol {
  counter-reset: item;
}

li {
  display: block;
}

li:before {
  content: counters(item, ".") " ";
  counter-increment: item;
}

ol li ol li {
  margin-left: 80px; /* The left margin should have exactly the width of one number and a   */
}

<ol>
  <li>Coffee
    <ol>
      <li>One</li>
      <li>Two</li>
      <li>Three</li>
    </ol>
  </li>
  <li>Tea
    <ol>
      <li>One</li>
      <li>Two</li>
      <li>Three</li>
    </ol>
  </li>
  <li>Milk</li>
  <li>Cool</li>
</ol>

The ol li ol li currently has margin-left: 80px;. Now it would be possible to manually adjust the px value in a way that for example 1.1 is perfectly left aligned with Coffee. But to make sure it will be always perfectly aligned, also with other fonts, I would like to insert an invisible space of one number and a  . With that, it should be perfectly aligned on one line.

Here is an image to show how it should look like:

How can this be done? I would be very thankful for help.

Answer 1

Float can do it. You make the first number float with a tiny bottom margin and it will push everything to the right by its width.

* {
  margin: 0;
  padding: 0;
  font-family: Arial;
}

ol {
  counter-reset: item;
}

li {
  display: block;
}

li:before {
  content: counters(item, ".") " ";
  counter-increment: item;
}

/* select li that has "ol" */
li:has(ol):before {
  float: left;
  margin-bottom: 5px; /* small value */
}

ol ol {
  overflow: hidden; /* create a formatting context for the float */
}

<ol>
  <li>Coffee
    <ol>
      <li>One</li>
      <li>Two</li>
      <li>Three</li>
    </ol>
  </li>
  <li>Tea
    <ol>
      <li>One</li>
      <li>Two</li>
      <li>Three</li>
    </ol>
  </li>
  <li>Milk</li>
  <li>Cool</li>
</ol>