How can I set all my li in the middle so they align properly

Issue

I want to give a spec table for the Watch 4. For now, I have this code.

<div class="specs">
      <ul class="info">
        <li>Lengte</li>
        <li>44 mm</li>
      </ul>
    </div>
    <div class="specs">
      <ul class="info">
        <li>Breedte</li>
        <li>43.3 mm</li>
      </ul>
    </div>

with this CSS code

.specs{
  position: relative;
  top: 20px;
  display: flex;
  flex-direction: row;
  align-items: center;
}
.info{
  display: flex;
  flex-direction: row;
  color: black;
  align-items: center;
  margin-left: auto;
  margin-right: auto;
  border-bottom: 1px black solid;
  padding: 0;
}
.info li{
  display: flex;
  flex-direction: row;
  margin-right: 200px;
  margin-left: 200px;
}

Here is the full project https://jsfiddle.net/2wvfyg16/ You might have to make the CSS tab bigger.

All the way at the bottom at the tab "Verbindungen".

It is all miss aligned.

Solution

As the data appears to be tabular, this snippet is a simple start on setting out the two columns with spacing in an HTML table.

Obviously you'll want to change things to give the exact layout your want but it does demonstrate that an HTML table can give the sort of formatting required.

#specs {
  width: 100vw;
  border-collapse: collapse;
}

#specs th {
  font-size: 3em;
  text-align: left;
  padding-top: 1em;
}

#specs td {
  width: 50%;
  padding: 1em 5em;
}

#specs td {
  font-size: 2em;
}

#specs tr:not(.cat) {
  border-bottom: solid 1px black;
  padding: 1em;
}

<table id="specs">
  <tr class="cat">
    <th colspan="2">Formaat</th>
  </tr>
  <tr>
    <td>Lengte</td>
    <td>44 mm</td>
    <tr>
      <td>Breedte</td>
      <td>43.3 mm</td>
    </tr>
    <tr>
      <td>Hoogte</td>
      <td>9.8 mm</td>
    </tr>
    <tr>
      <td>Gewicht</td>
      <td>30 gram</td>
    </tr>
    <tr>
      <td>Stofdicht</td>
      <td>Ja</td>
    </tr>
    <tr>
      <td>Spatwaterdicht</td>
      <td>Ja</td>
    </tr>
    <tr>
      <td>Waterdicht</td>
      <td>Ja</td>
    </tr>
    <tr class="cat" colspan="2">
      <th colspan="2">Display</th>
    </tr>
    <tr>
      <td>Schermgrootte</td>
      <td>40 &amp; 44 mm</td>
    </tr>
    <tr>
      <td>Schermtype</td>
      <td>OLED</td>
    </tr>
    <tr class="cat" colspan="2">
      <th colspan="2">Processor</th>
    </tr>
    <tr>
      <td>Chipset</td>
      <td>Samsung Exynos W920</td>
    </tr>
    <tr>
      <td>Opslagcapaciteit</td>
      <td>16 GB</td>
    </tr>
    <tr>
      <td>Werkgeheugen</td>
      <td>1500 MB</td>
    </tr>
    <tr class="cat" colspan="2">
      <th colspan="2">Software</th>
    </tr>
    <tr>
      <td>Besturingssysteem</td>
      <td>One UI Watch</td>
    </tr>
    <tr class="cat" colspan="2">
      <th colspan="2">Sensoren</th>
    </tr>
    <tr>
      <td>Accelerometer</td>
      <td>Jas</td>
    </tr>
    <tr>
      <td>Hartslagmeter</td>
      <td>Ja</td>
    </tr>
    <tr>
      <td>Gyroscoop</td>
      <td>Ja</td>
    </tr>
    <tr>
      <td>GPS</td>
      <td>Ja</td>
    </tr>
    <tr class="cat" colspan="2">
      <th colspan="2">Batterij</th>
    </tr>
    <tr>
      <td>Capaciteit</td>
      <td>361 mAh</td>
    </tr>
    <tr>
      <td>Vervangbaar</td>
      <td>Nee</td>
    </tr>
    <tr class="cat" colspan="2">
      <th colspan="2">Verbindingen</th>
    </tr>
    <tr>
      <td>WiFi</td>
      <td>Ja</td>
    </tr>
    <tr>
      <td>Mobiel Netwerk</td>
      <td>Nee</td>
    </tr>
    <tr>
      <td>Bluetooth</td>
      <td>Bluetooth 5.0</td>
    </tr>
    <tr>
      <td>NFC</td>
      <td>Ja</td>
    </tr>
</table>

Answered By - A Haworth