List Item horizontal spacing - html

Question

I have the following list and want to add another element to list element with Name. So I am adding Primary User but want the new element Primary User styled to the right of the line. What's the best way to do this? Is it awkward doing this to a list item? Thanks.
<div class="panel-heading">Company Details</div>
<ul class="list-group">
<li class="list-group-item"><b>Name:</b> <%= #company.name %><b>Primary User:</b><%= #company.primary %></li>```

Answer 1

One possibility would be to use float right. Don't know if it is the best one and there are probably plenty others, but it will work.
HTML
<div class="panel-heading">Company Details</div>
<ul class="list-group">
<li class="list-group-item">Name: Test1 <span class="user">User: Test</span>
</li>
<li class="list-group-item">Name: Test1 <span class="user">User: Test</span>
</li>
<li class="list-group-item">Name: Test1 <span class="user">User: Test</span>
</li>
</ul>
CSS
.user {
float: right;
}
.list-group {
width: 250px;
}
https://jsfiddle.net/zy7d48ub/

Answer 2

Wrap your code inside this div wrapper and it should work.
<div class = "panel-heading-wrapper" style = "display: flex;">

Answer 3

I find myself using (maybe overusing?) css grid a lot for layouts such as this. It has so much flexibility for fine-tuning the layout. My approach would be:
<div class="panel">
<div class="panel-heading">
Company
</div>
<div class="name">
Name
</div>
<div class="user">
User
</div>
</div>
.panel {
display: grid;
grid-template-columns: 100px 100px;
grid-template-rows: 20px 20px;
grid-template-areas: 'heading heading''name user'
}
.panel-heading {
grid-area: heading;
}
.name {
grid-area: name;
}
.user {
grid-area: user;
}
here's what it looks like on jsfiddle