How can I better align these elements? - css

Question

I am currently working on a remake of a forum I visit and I'm having trouble keeping these elements aligned. I want it so each topic aligns with Topic, each user name aligns with Created By, etc. from the blue header. As you can see from the snippet I manually set the padding of each li but when I use the same class names for the second li it's completely different. I'm having trouble figuring out the proper way to make it so each element is contained and it doesn't matter how long each text line is, it will stay aligned. Please advice.
.forum__main-board {
background-color: #28398a;
border: 1px solid #28398a;
width: 87%;
margin-top: 5px;
padding: 3px;
}
.forum__main-board span {
color: #fff;
padding: 0 10px;
}
.forum__main-topic {
padding: 5px 10px;
}
.forum__right {
float: right;
}
.forum__msg {
color: black !important;
}
.forum__cb {
margin-right: 5vw;
}
.forum__lp {
margin-right: 20px;
}
.forum__new-topic ul {
margin: 0;
padding: 0;
}
.forum__new-topic li {
display: inline;
color: #3449b2;
text-decoration: none;
list-style: none;
margin: 0;
}
.forum__topic {
padding-left: 4px;
}
.forum__creator {
padding-left: 531px;
}
.forum__msg {
padding-left: 137px;
}
.forum__time {
padding-left: 40px;
}
<div class="forum__main-board">
<span>Topic</span>
<span class="forum__right forum__lp">Last Post</span>
<span class="forum__right">Msgs</span>
<span class="forum__right forum__cb">Created By</span>
</div>
<div class="forum__main-topic">
<div class="forum__new-topic">
<ul>
<li class="forum__topic">
Skipping the opening is not the way to go
</li>
<li class="forum__creator">kant69</li>
<li class="forum__msg">10</li>
<li class="forum__time">2/13 1:09PM</li>
</ul>
</div>
<div class="forum__new-topic">
<ul>
<li class="forum__topic">This is a test</li>
<li class="forum__creator">kant69</li>
<li class="forum__msg">10</li>
<li class="forum__time">2/13 1:09PM</li>
</ul>
</div>
</div>

Answer 1

It should be easier to use a table element to arrange data in rows and columns :
.forum__msg {
color: black !important;
}
table {
border-collapse: collapse;
width: 100%;
}
th {
background-color: #28398a;
border: 1px solid #28398a;
color: white;
font-weight: normal;
text-align: left;
}
td {
color: #3449b2;
}
<table>
<thead>
<tr>
<th>Topic</th>
<th>Created By</th>
<th>Msgs</th>
<th>Last Post</th>
</tr>
</thead>
<tbody>
<tr>
<td>Skipping the opening is not the way to go</td>
<td>kant69</td>
<td class="forum__msg">10</td>
<td>2/13 1:09PM</td>
</tr>
<tr>
<td>This is a test</td>
<td>kant69</td>
<td class="forum__msg">10</td>
<td>2/13 1:09PM</td>
</tr>
</tbody>
</table>