Ok. I think I ended up finding something that works. The margin is percentage based and therefore it isn’t fixed but still lines up.

https://jsfiddle.net/gdvcpfqu/

<div class="tbl-header">
   <h3>Agenda</h3>
   <div>Time: 30 mins</div>
</div>
<ol class="numbered">
  <li>
    <div class="index">1</div>
    <div class="item">Agenda Item 1</div>
    <div class="time">10 mins</div>
  </li>
  <li>
    <div class="index">2</div>
    <div class="item">Agenda Item 2</div>
    <div class="time">20 mins</div>
  </li>
</ol>

SCSS

.tbl-header {
  display: flex;
  justify-content: space-between;
  align-items: center;

  h3 {
    margin: 0 calc(24px + 2%)
  }
}

ol.numbered {
    list-style: none;
    counter-reset: counter1;
    padding: 0;

    li {
        margin: 1em 0;
        display: flex;
        align-items: center;

        .item {
          margin-left: 2%;
          flex: 1 1 auto;
        }

        .time {
          flex: 0 0 auto;
        }

         .index {
            background: red;
            max-width: 24px;
            width: 24px;
            height: 24px;
            font-size: 18px;
            line-height: 24px;
            border-radius: 50%;
            display: inline-block;
            color: white;
            text-align: center;
            font-weight: normal;
            font-stretch: normal;
            font-style: normal;
            letter-spacing: normal;
        }
    }


}

I’m trying to align a title element with the second column of the content below. A visual example would be:

Here you can see that the title aligns nicely with the content below. Applying a margin the same size as the numbers below + padding etc. would also work but I want the size of the first column below to shrink on tighter screens – generally thinking of using flexbox for the actual table content.

I could use a table and insert the title as the second column of the first row, but this is misusing tables.

Here is my code using flexbox for the items and li::before for the numbers.

https://jsfiddle.net/4dnLu836/1/

<div class="tbl-header">
   <h3>Agenda</h3>
   <div>Time: 30 mins</div>
</div>
<ol class="numbered">
  <li>
    <div class="item">Agenda Item 1</div>
    <div class="time">10 mins</div>
  </li>
  <li>
    <div class="item">Agenda Item 2</div>
    <div class="time">20 mins</div>
  </li>
</ol>

SCSS:

.tbl-header {
  display: flex;
  justify-content: space-between;
  align-items: center;

  h3 {
    margin-left: calc(24px + 1em)
  }
}

ol.numbered {
    list-style: none;
    counter-reset: counter1;
    padding: 0;

    li {
        margin: 1em 0;
        display: flex;
        align-items: center;
        counter-increment: counter1;

        .item {
          margin-left: 1em;
          flex: 1 1 auto;
        }

        .time {
          flex: 0 0 auto;
        }
    }

    li::before {
        content: counter(counter1);
        background: red;
        width: 24px;
        height: 24px;
        font-size: 18px;
        line-height: 24px;
        border-radius: 50%;
        display: inline-block;
        color: white;
        text-align: center;
        font-weight: normal;
        font-stretch: normal;
        font-style: normal;
        letter-spacing: normal;
    }
}

Note: the problem above is that I am having to define a fixed margin: 1em on the inner item and the agenda title.

Thanks
Iain