Align title with second column of content - html

Question

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

Answer 1

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