So looking at the HTML that is rendered through the following after angularjs runs:

<small class="text-muted">
  <div ng-repeat="f in item.secondary_displays" class="secondary-display">
    <span >INC0010019</span>
  </div>
  <div ng-repeat="f in item.secondary_displays" class="secondary-display">
    <span >1 - High</span>
  </div>
  <div ng-repeat="f in item.secondary_displays" class="secondary-display">
    <span >Avano Ishida</span>
  </div>
  <div>
    <span>My Group Name</span>
  </div>
</small>

 

What you are wanting to do is get the last two divs to be side by side rather than one above the other. There are a few ways to deal with that but I will show you a CSS only one.

// Added this class to the small html element. "<small class="text-muted secondary-wrapper">"
.secondary-wrapper {
  // Use flexbox to order the elements to make it easiet to align the items
  display: flex;

  // Allows the elements to wrap to a new line
  flex-wrap: wrap;
  
  // Most elements should be max width so there is one on each line
  div {
    width: 100%;
  }

  // Second last and last element should share a line
  div:nth-last-child(2), div:last-child {
    width: unset;
  }
  
  // Add some distance between the second last and last element
  div:last-child {
    margin-left: 1em;
  }
}

 

The result looks like:

find_real_file.png

 

Note that this will always make the second last and last lines in the small element share a line.

View solution in original post