Align all the list items - html

Question

I want to align all the list items perfectly but I am not able to do it.
If you see the image since the second li has more text, it is causing them to not align.
I can't use text-overflow on the name of the person, unlike notes.
Margin and padding are also not working.
Please help me how to solve it .
#data-table .list {
display: flex;
align-items: center;
justify-content: space-between;
text-align: center;
color: #97A1A9;
font-size: .9rem;
white-space: nowrap;
}
#data-table .list>* {
padding: 1rem 2rem;
}
#data-table .list div:first-child {
display: flex;
align-items: center;
justify-content: center;
text-align: center;
}
#data-table .list div:first-child input[type="checkbox"] {
margin-right: 7px;
}
#data-table .list div:last-child {
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
width: 221px;
}
<div id="data-table">
<ul>
<li class="list">
<div><input type="checkbox">Customer Name</div>
<div>Seller #</div>
<div>Bill #</div>
<div>Amount</div>
<div>Due Date</div>
<div>Bill Payment Date</div>
<div>Notes</div>
</li>
<!-- Dummy -->
<li class="list">
<div><input type="checkbox">Roshan Ahmad Shaheen</div>
<div>2523532</div>
<div> 73457346735</div>
<div>122.76k</div>
<div>23-Jan-2021</div>
<div> --</div>
<div>Lorem ipsum dolor sit, amet consectetur adipisicing elit. Quasi, accusamus?</div>
</li>
<li class="list">
<div><input type="checkbox">Roshan Ahmad</div>
<div>2523532</div>
<div> 73457346735</div>
<div>122.76k</div>
<div>23-Jan-2021</div>
<div> --</div>
<div>Lorem ipsum dolor sit, amet consectetur adipisicing elit. Quasi, accusamus?</div>
</li>

Answer 1

There is no way to align flexbox elements on different rows without setting fixed widths. Frankly this is tabular data and so you should be using a table.
Or CSS-Tables
* {
margin: 0;
padding: 0;
box-sizing: border-box;
}
::before,
::after {
box-sizing: inherit;
}
#data-table ul {
display: table;
}
#data-table .list {
display: table-row;
text-align: left;
color: #97A1A9;
font-size: .9rem;
white-space: nowrap;
}
#data-table .list>* {
padding: 1rem 2rem;
display: table-cell;
}
#data-table .list div:first-child input[type="checkbox"] {
margin-right: 7px;
}
<div id="data-table">
<ul>
<li class="list">
<div><input type="checkbox">Customer Name</div>
<div>Seller #</div>
<div>Bill #</div>
<div>Amount</div>
<div>Due Date</div>
<div>Bill Payment Date</div>
<div>Notes</div>
</li>
<!-- Dummy -->
<li class="list">
<div><input type="checkbox">Roshan Ahmad Shaheen</div>
<div>2523532</div>
<div> 73457346735</div>
<div>122.76k</div>
<div>23-Jan-2021</div>
<div> --</div>
<div>Lorem ipsum dolor sit, amet consectetur adipisicing elit. Quasi, accusamus?</div>
</li>
<li class="list">
<div><input type="checkbox">Roshan Ahmad</div>
<div>2523532</div>
<div> 73457346735</div>
<div>122.76k</div>
<div>23-Jan-2021</div>
<div> --</div>
<div>Lorem ipsum dolor sit, amet consectetur adipisicing elit. Quasi, accusamus?</div>
</li>