Make columns within a list in HTML/CSS

I have an unordered list in which I am displaying some objects. These objects have multiple attributes which I want to display. I made this in Python Flask and jinja.

<li class="list-group-item">
            <a href="link">{{candidate.name}}</a>
            <label id="min">Min. value:<input type="number" id="min" name="min-val" min="1" max="100"></label>
            <label id="max">Max. value:<input type="number" id="max" name="max-val" min="1" max="100"></label>
            <p id="average_rank">{{'%0.2f' % average_rank|float}}</p>
            <p id="points">{{points}}</p>
        </li>

I thought I could use the following css to let all the columns start at the same position.

#points {
    position: relative;
    left: 85%;
}

#average_rank {
    position: relative;
    left: 75%;
}

#min {
    position: relative;
    left: 5%;
}

#max {
    position: relative;
    left: 15%;
}

label {
    vertical-align: top;
}

a {
    position: relative;
    left: 1%;
    text-align: left;
    float: left;
}

Where I just change the relative position with a certain percentage. This doesn’t seem to work and it looks like the length of the items influences the placements.

How can I put the attributes in the list elements in columns?

I would want it to look like this:

A link1             Attribute1         Rank
Longer_link         Attribute2         Rank2
Link3               Attribute345       Rank3

>Solution :

To get things started, replace all of your CSS with this:

.list-group-item {
  display: grid;
  grid-template-columns: repeat(5, auto);
  align-items: center;
}

grid-template-columns defines the width of the 5 columns, so to start with each list item will vary. You can get consistency across your items by using fixed values (percentages, pixels, vw, etc.)