Align all the list items

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>