How to make a list with each row divided into two columns, with the first column growing to the size of its contents?

Question

Originally I needed this for a chat app. Now I need it for something else as well... I figure I\'d better ask.

Elaborating the chat app example: chat messages are

Answer 1

You are almost good with your grid solution. You can keep the li element by introducing display:contents (https://caniuse.com/#feat=css-display-contents) but you will still not be able to style the li since this one will no more generate a box content:

ul {
  display: grid;
  grid-template-columns: repeat(2, auto);
}
li {
  display:contents;
}

.author {
  font-weight: bold;
  margin-right: 5px;
  text-align: right;
}

.author:after {
  content: ":";
}

span {
  margin-top: 10px;
}

<ul>
  <li><span class="author">nick</span><span class="message">Don't you Remember, the Fifth of November, 'twas Gunpowder Treason Day, I let off my gun, and made'em all run. And Stole all their Bonfire away.</span>
  </li>
  <li><span class="author">OtherNick</span><span class="message">Miss Susie had a steamboat, the steamboat had a bell. The steamboat went to Heaven, Miss Susie went to ...</span></li>
</ul>

Another way is to consider display:table like below:

ul {
  display: table;
}

li {
  display: table-row;
}

.author {
  font-weight: bold;
  padding-right: 5px;
  text-align: right;
}

.author:after {
  content: ":";
}

span {
  padding-top: 10px;
  display: table-cell;
}

<ul>
  <li><span class="author">nick</span><span class="message">Don't you Remember, the Fifth of November, 'twas Gunpowder Treason Day, I let off my gun, and made'em all run. And Stole all their Bonfire away.</span>
  </li>
  <li><span class="author">OtherNick</span><span class="message">Miss Susie had a steamboat, the steamboat had a bell. The steamboat went to Heaven, Miss Susie went to ...</span></li>
</ul>