List Item horizontal spacing-CodePudding

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 >Company Details</div>
        <ul >
          <li ><b>Name:</b> <%= @company.name %><b>Primary User:</b><%= @company.primary %></li>```

CodePudding user response：

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 >Company Details</div>
<ul >
  <li >Name: Test1 <span >User: Test</span>
  </li>
  <li >Name: Test1 <span >User: Test</span>
  </li>
  <li >Name: Test1 <span >User: Test</span>
  </li>
</ul>

CSS

.user {
  float: right;
}

.list-group {
  width: 250px;
}

https://jsfiddle.net/zy7d48ub/

CodePudding user response：

Wrap your code inside this div wrapper and it should work.

<div class = "panel-heading-wrapper" style = "display: flex;">

CodePudding user response：

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 >
  <div >
    Company
  </div>
  <div >
    Name
  </div>
  <div >
    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