list numbering not vertical align with content - css

Question

I'm trying to implement an ordered list with a collapsible part inside the li elements. The idea is to have some basic information about a given context and by clicking on the link you get further information. The code is working but the numbering (1.) is not vertical-align with the content (Click to collapse) and I don't know how it can implement that properly. I'm not a css guru, so maybe you can help me.
<script src="https://cdn.jsdelivr.net/npm/bootstrap#5.0.2/dist/js/bootstrap.min.js"></script>
<link href="https://cdn.jsdelivr.net/npm/bootstrap#5.0.2/dist/css/bootstrap.min.css" rel="stylesheet"/>
<ol class="list-group list-group-numbered">
<li class="list-group-item">
<div class="d-flex justify-content-between align-items-start">
<div class="ms-2 me-5">
<div class="fw-bold">
<a aria-expanded="false" aria-controls="collapseExample" data-bs-toggle="collapse"
href="#collapseExample">Click to collpase</a>
</div>
some information
</div>
<div class="ms-2 ms-5 me-auto">
some more information
</div>
<span class="badge bg-primary rounded-pill">42</span>
</div>
<div class="collapse" id="collapseExample">
<table class="table">
<thead>
<tr>
<th>#</th>
<th>Foo, Bar</th>
<th>Foobar</th>
<th>FoobarBaz</th>
<th>Baz</th>
</tr>
</thead>
<tbody>
<tr>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
</tr>
</tbody>
</table>
</div>
</li>
</ol>

Answer 1

You can make your list-group-item grid (add .d-grid, .grid-template) and make custom grid areas to place inner content to special cells, see Code Snippet CSS part.
Also for shorts in CSS, toggle-button can be wrapped to .grid-template-toggle class and collapse block class list can be extended by .grid-template-collapse.
.grid-template {
grid-template-areas: 'num toggle' 'collapse collapse';
grid-template-columns: min-content 1fr;
}
.grid-template:before {
grid-area: num;
}
.grid-template-toggle {
grid-area: toggle;
}
.grid-template-collapse {
grid-area: collapse;
}
<script src="https://cdn.jsdelivr.net/npm/bootstrap#5.0.2/dist/js/bootstrap.min.js"></script>
<link href="https://cdn.jsdelivr.net/npm/bootstrap#5.0.2/dist/css/bootstrap.min.css" rel="stylesheet" />
<ol class="list-group list-group-numbered">
<li class="list-group-item d-grid grid-template">
<div class="d-flex justify-content-between align-items-start grid-template-toggle">
<div class="ms-2 me-5">
<div class="fw-bold">
<a aria-expanded="false" aria-controls="collapseExample" data-bs-toggle="collapse" href="#collapseExample">Click to collpase</a>
</div>
some information
</div>
<div class="ms-2 ms-5 me-auto">
some more information
</div>
<span class="badge bg-primary rounded-pill">42</span>
</div>
<div class="collapse grid-template-collapse" id="collapseExample">
<table class="table">
<thead>
<tr>
<th>#</th>
<th>Foo, Bar</th>
<th>Foobar</th>
<th>FoobarBaz</th>
<th>Baz</th>
</tr>
</thead>
<tbody>
<tr>
<td>Some Text</td>
<td>More text text text</td>
<td>More text text text More text text text</td>
<td>More text text text More text text text</td>
<td>More text text text More text text text</td>
</tr>
</tbody>
</table>
</div>
</li>
</ol>

Answer 2

.grid-template {
grid-template-areas: 'num toggle' 'collapse collapse';
grid-template-columns: min-content auto;
}
.grid-template:before {
grid-area: num;
}
.grid-template-toggle {
grid-area: toggle;
}
.grid-template-collapse {
grid-area: collapse;
}
<script src="https://cdn.jsdelivr.net/npm/bootstrap#5.0.2/dist/js/bootstrap.min.js"></script>
<link href="https://cdn.jsdelivr.net/npm/bootstrap#5.0.2/dist/css/bootstrap.min.css" rel="stylesheet"/>
<ol class="list-group list-group-numbered">
<li class="list-group-item d-grid grid-template">
<div class="d-flex justify-content-between align-items-start grid-template-toggle">
<div class="ms-2 me-5">
<div class="fw-bold">
<a aria-expanded="false" aria-controls="collapseExample" data-bs-toggle="collapse"
href="#collapseExample">Click to collpase</a>
</div>
some information
</div>
<div class="ms-2 ms-5 me-auto">
some more information
</div>
<span class="badge bg-primary rounded-pill">42</span>
</div>
<div class="collapse grid-template-collapse" id="collapseExample">
<table class="table">
<thead>
<tr>
<th>#</th>
<th>Foo, Bar</th>
<th>Foobar</th>
<th>FoobarBaz</th>
<th>Baz</th>
</tr>
</thead>
<tbody>
<tr>
<td>Some Text</td>
<td>More text text text</td>
<td>More text text text More text text text</td>
<td>More text text text More text text text</td>
<td>More text text text More text text text</td>
</tr>
</tbody>
</table>
</div>
</li>
</ol>