Simple Who's Who List

<ul id="kit-whoswho">
  <li class="player">
    <h2>Name</h2>
    <img src="https://images.rpginitiative.com/uploads/monthly_2018_07/100x100.png.e1cfed5cb473a0f45279c7ef48bf9cfb.png">
    <ul>
      <li><a href="#">Name</a> <span class="details">stuff and things</span></li>
      <li><a href="#">Name</a> <span class="details">stuff and things</span></li>
    </ul>
  </li>
  <li class="player">
    <h2>Name</h2>
    <img src="https://images.rpginitiative.com/uploads/monthly_2018_07/100x100.png.e1cfed5cb473a0f45279c7ef48bf9cfb.png">
    <ul>
      <li><a href="#">Name</a> <span class="details">stuff and things</span></li>
      <li><a href="#">Name</a> <span class="details">stuff and things</span></li>
    </ul>
  </li>
  <li class="player">
    <h2>Name</h2>
    <img src="https://images.rpginitiative.com/uploads/monthly_2018_07/100x100.png.e1cfed5cb473a0f45279c7ef48bf9cfb.png">
    <ul>
      <li><a href="#">Name</a> <span class="details">stuff and things</span></li>
      <li><a href="#">Name</a> <span class="details">stuff and things</span></li>
    </ul>
  </li>
</ul>

<style>
  
/******** WHO'S WHO LIST - EDIT AS YOU LIKE. ********/

ul#kit-whoswho {
  list-style-type: none;
  margin: 2px auto; /* center the box */
  margin-block-start: 0em; /* ditch annoying browser style */
  padding-inline-start: 0px; /* ditch annoying browser style */
  padding: 10px;
  background: #f2f2f2; /* CHANGE COLOUR TO MATCH YOUR THEME! */
  width: 90% /* adjust as necessary */
}

ul#kit-whoswho li:first-child > h2 {
  margin-block-start: 0em /* ditch annoying browser style */
}

ul#kit-whoswho li.player {
  border-bottom: 1px solid rgba(0,0,0, .025) /* CHANGE COLOUR TO MATCH YOUR THEME! */
}

ul#kit-whoswho li.player > h2 {
  text-align: right;
  margin-block-start: 5px;
  margin-block-end: 0; /* ditch annoying browser style */
  color: #000; /* CHANGE COLOUR TO MATCH YOUR THEME! */
  border-bottom: 1px solid #ccc /* CHANGE COLOUR TO MATCH YOUR THEME! */
}

ul#kit-whoswho li.player img {
  position: relative;
  top: 5px; /* push the image down from the border */
  float: left /* put the image onto the left, next to the text */
}

ul#kit-whoswho li.player ul {
  padding-inline-start: 0; /* ditch annoying browser style */
  margin-block-start: 0; /* ditch annoying browser style */
  list-style-type: none;
  border-left: 1px solid #ccc; /* CHANGE COLOUR TO MATCH YOUR THEME! */
  margin-left: 105px; /* push the list right of the image, change this value to be image width + 5px */
  padding: 5px 0 5px 5px;
  min-height: 100px /* ensure list is at least the height of the image, change this value to match image height */
}

ul#kit-whoswho li ul li:last-child {
  padding-bottom: 5px
}

ul#kit-whoswho li.player a {
  text-decoration: none;
  color: #000 /* CHANGE COLOUR TO MATCH YOUR THEME! */
}

ul#kit-whoswho .details {
  font-style: italic;
  color: #121212 /* CHANGE COLOUR TO MATCH YOUR THEME! */
}

  /***************** END WHO'S WHO LIST ********************/</style>