Выровняйте заголовок со вторым столбцом содержимого

Question

Я пытаюсь выровнять элемент заголовка со вторым столбцом содержимого ниже. Наглядным примером может быть:

Здесь вы можете видеть, что заголовок хорошо сочетается с содержимым ниже. Применение поля того же размера, что и цифры ниже + отступ и т. Д. c. тоже будет работать, но я хочу, чтобы размер первого столбца ниже уменьшался на более плотных экранах - обычно думаю об использовании flexbox для фактического содержимого таблицы.

Я мог бы использовать таблицу и вставить заголовок в качестве второго столбца первая строка, но это неправильное использование таблиц.

Вот мой код, использующий flexbox для элементов и li :: before для чисел.

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>

S CSS:

.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;
    }
}

Примечание: проблема выше в том, что мне нужно определить фиксированное поле: 1em для внутреннего элемента и заголовка повестки дня.

Спасибо, Иэн

Answer 1

Хорошо. Думаю, я нашел кое-что, что работает. Маржа рассчитывается в процентах и ​​поэтому не является фиксированной, но все равно выравнивается.

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>

S CSS

.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;
        }
    }


}