How to create equal spacing between the line elements - html

Question

Below is the HTML code for my angular JS web app:
<div class="choice" >
<br> <br>
<ul>
<li class="players" ng-repeat="player in players">
<img ng-src="{{player.image}}"><br><br>
<span class="glyphicon glyphicon-user"></span> {{player.name}} <br>
<span class="glyphicon glyphicon-flag"></span> {{player.Team}} <br>
<span class="glyphicon glyphicon-tag"></span>₦{{player.price}} <br>
<span class="glyphicon glyphicon-knight"></span>{{player.position| uppercase }}<br>
<span class="glyphicon glyphicon-info-sign"></span>{{player.Status}}
<br>
<button class="btn btn-secondary btn-sm" ng-class="{'btn-danger': history.indexOf(player) >= 0 }" ng-click="buy(player)">{{history.indexOf(player)>=0?'REMOVE':'SELECT'}}</button>
</li>
</ul>
<br><br>
<button type="submit" class="btn btn-lg btn-primary btn-md " ng-disabled="history.length<6" ng-disabled="getTotal<0" ng-click="saveTeam()" > Save Team </button>
<br><br>
</div>
And below is the CSS:
.choice{
background: white;
color: #333;
font-size: 13px;
}
.choice ul {
list-style: none;
}
.choice img {
max-height: 100px;
max-width: 65px;
margin-top: 7px;
}
.players{
display: inline-table;
float: left;
text-align: left;
}
MY ISSUE:
The Issue i have is that the spacing in between the line elements is not consistent between the list elements. Depending on the length of the name a player, the space between one player and the next is displayed inconsistently. I had hopes that using the flex: left; would solve this but it does not. Is there a way to achieve equal spacing between the list elements ?

Answer 1

use ulClass class in your <ul> tag. and its css as below
.ulClass{
display: flex;
flex-direction: column;
justify-content: space-between;
}