[FIXED] Make columns within a list in HTML/CSS

Issue

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 you'll find your columns don't line up across different items as here they're all set to auto. You can get consistency across your items by using consistently defined values (percentages, pixels, vw, etc.)

Answered By - Geat